JavaScript SDK for developing over the Kissflow lowcode platform
Install the SDK as a module: npm i @kissflow/lowcode-client-sdk
Then import into your project:
import KFSDK from "@kissflow/lowcode-client-sdk";
let kf;
(async function () {
kf = await KFSDK.initialize();
})();
Note: Initializing Kf SDK in custom components returns a promise.
SDK can also be loaded directly into HTML by adding:
<script src="https://unpkg.com/@kissflow/lowcode-client-sdk@latest/dist/kfsdk.umd.js"></script>
Then SDK can be initialized as:
let kf;
window.onload = async function () {
kf = await window.kf.initialize();
};
Details of authenticated user can be accessed as following
const { Name, Email, _id } = kf.user
And account id can be accessed as kf.account._id
Fetch any other kissflow api & external api using this method. kf.api has header tokens by default for making authenticated kissflow api calls
Note: This method has a limit of 10 seconds for an api call
kf.api(url, config).then((res) => {...})
// or
let resp = await kf.api(url, config)
Context methods are polymorphic, it has different classes pre-initialized based on execution context.
kf.context
returns a CustomComponent
class while using inside custom component. Custom component supported methods:
Listens for changes in parameter given to custom components in lowcode application.
kf.context.watchParams(function (data) {
console.log(data);
});
kf.context
returns a Form
class when it is used inside a kissflow's form that could be either Process, case or Dataform & it has following supported methods
Use this function to get the current value of a form field
kf.context.getField(fieldId).then((res) => {...})
// or
let value = await kf.context.getField(fieldId)
Use this function to get update any field in the form
kf.context.updateField({ fieldId_1: fieldValue, fieldId_2: fieldValue });
Use this function to get the JSON data of the current form
const json = await kf.context.toJSON();
{
"Untitled_Field": "testing",
"_created_at": "2022-03-01T03:04:09Z",
"_flow_name": "form events",
"_id": "Pk4_T1WGWuMe",
"_modified_at": "2022-03-01T03:04:09Z"
}
kf.context.getTable(tableId)
returns a Table
class which has the following methods
Appends row details to the table.
const table = kf.context.getTable(tableId);
table.addRow({ columnId1: value, columnId2: value });
Appends multiple rows details to the table.
const table = kf.context.getTable(tableId);
let accumulator = [];
someArrayOfObjects.forEach(function(rowDetail) {
accumulator.push({
columnId1: rowDetail[columnId1],
columnId2: rowDetail[columnId2]
});
});
await table.addRows(accumulator);
Deletes a row from the table based on the row id
const table = kf.context.getTable(tableId);
await table.deleteRow(rowId);
Deletes multiple rows from the table based on given array of strings.
const table = kf.context.getTable(tableId);
await table.deleteRows([rowId1, rowId2, rowId3]);
Use this function to perform form actions on any row inside a child table
const table = kf.context.getTable(tableId);
const row = table.getRow(rowId);
Returns an instance of TableForm
class
Gets all the rows of the table
const rows = await kf.context.getTable(tableId).getRows();
Returns an array of TableForm
instances
Use this function to get the JSON data of the child table
const json = await kf.context.getTable(tableId).toJSON();
[{
"Untitled_Field": "row 1",
"_created_at": "2022-03-01T03:04:09Z",
"_flow_name": "form events",
"_id": "Pk4_T1WGWuMe",
"_modified_at": "2022-03-01T03:04:09Z"
},{
"Untitled_Field": "row 2",
"_created_at": "2022-03-01T03:04:09Z",
"_flow_name": "form events",
"_id": "Pk4_T1WGWuMe",
"_modified_at": "2022-03-01T03:04:09Z"
}]
A single row inside a table is known as Table row
kf.context
returns a TableForm
class which has the following methods
Use this function to get the value of the table row
kf.context.getField(fieldId).then((res) => {...})
// or
let value = await kf.context.getField(fieldId)
Use this function to get update any field in the table row
kf.context.updateField({ fieldId_1: fieldValue, fieldId_2: fieldValue });
Use this function to perform form actions on the main form
const mainForm = kf.context.getParent();
mainForm.updateField({ fieldId_1: fieldValue, fieldId_2: fieldValue });
Returns an instance of Form
class using which we can perform any action on the
main form
Get JSON output of table row
const json = await kf.context.toJSON();
{
"Untitled_Field": "testing",
"_created_at": "2022-03-01T03:04:09Z",
"_flow_name": "form events",
"_id": "Pk4_T1WGWuMe",
"_modified_at": "2022-03-01T03:04:09Z"
}
kf.client.showInfo(message);
Displays the confirmation dialog, and returns users's action as a response
kf.client.showConfirm({ title, content }).then((action) => {
if(action === "OK") // user clicked ok button
else // user clicked cancel button or clicked outside the popup
})
kf.client.redirect(url);
kf.app
represents the active kissflow app and kf.app._id
returns its id.
const appVarible1 = await kf.app.getVariable("variableId");
let value = await kf.app.setVariable("variableId", value);
// or
await kf.app.setVariable({
variableId_1: "value_1",
variableId_2: 3345
});
openPage(id)
returns Page class instance
const pageInputParameters = {
param1: value,
param2: value
};
kf.app.openPage(pageId, pageInputParameters);
// Note: Page Input parameters are optional.
kf.app.page
returns the active page opened inside application and kf.app.page._id
returns its id.
let value = await kf.app.page.getParameter("parameterId"); // for retreiving single parameter
Get all page parameters
let allParams = await kf.app.page.getAllParameters();
// returns an object
{
parameterName: "Sample value",
parameterName2: "Sample value 2"
}
getComponent
returns a Component class.
const componentName = await kf.app.page.getComponent("componentId");
openPoup
returns a Popup class.
kf.app.page.openPopup("popupId", { inputParam1: "value" });
// Note: Popup parameters are optional.
Parameter: Component's Id Returns: Component class instance
const component = await kf.app.page.getComponent(componentId);
component.refresh(); // Refreshes the component
component.hide(); // Hides the component
component.show(); // Shows the component if it's been hidden previously
Component onMount takes in callBack function as argument.
Parameter: function
component.onMount(() => {
// function logic goes here... For eg.
// component.setActiveTab(2)
})
Sets specified tab as active. Parameter: Tabs' Number (Starts from 1 to N)
component.setActiveTab(2) // sets 2nd tab as active one
kf.app.page.popup
returns the active popup instance opened inside the page and its id can be accessed via kf.app.page.popup._id
And kf.app.page.getPopup(id)
returns this popup class instance.
let value = await kf.app.page.popup.getParameter("parameterId"); // for retreiving single popup parameter
Get all popup parameters
let allParams = await kf.app.page.popup.getAllParameters();
// Returns an object
{
parameterName: "Sample value",
parameterName2: "Sample value 2"
}
kf.app.page.popup.close() // for active popup
// or if you already have a popup instance...
greetPopup.close();
kf.formatter.toDate("08-24-2021").then((res) => {...})
// or
let value = await kf.formatter.toDate("08-24-2021");
kf.formatter.toDateTime("2021-08-26T14:30").then((res) => {...})
// or
let value = await kf.formatter.toDateTime("2021-08-26T14:30");
kf.formatter.toNumber("1,00,000.500000").then((res) => {...})
// or
let value = await kf.formatter.toNumber("1,00,000.500000");
kf.formatter.toCurrency("1,00,000.500000", "USD").then((res) => {...})
// or
let value = await kf.formatter.toCurrency("1,00,000.500000", "USD");
kf.formatter.toBoolean("yes").then((res) => {...})
// or
let value = await kf.formatter.toBoolean("yes");
let value = await kf.formatter.toBoolean("1");
let value = await kf.formatter.toBoolean("true");
let value = await kf.formatter.toBoolean("no");
let value = await kf.formatter.toBoolean("0");
let value = await kf.formatter.toBoolean("false");