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.
getDataform(formId)
returns a Dataform class instance
const dfInstance = kf.app.getDataform("dataform_id");
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.
Note: Any component specific methods that are used on Page load must be called inside component's onMount event.
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();
In Kissflow apps, dataforms gather and store data, enabling users to submit data into an app.
To begin with, obtain the dataform instance using:
const dfInstance = kf.app.getDataform("dataform_id");
Launches the import CSV popup, where you can upload CSV file and map columns to the corresponding fields.
let defaultValues = { fieldId: "value" };
dfInstance.importCSV(defaultValues);
Consider scenario where certain fields are not visible to the user(hidden in form visibilty). In that case, default values can be used to populate data in these hidden fields
//Get the dataform with the dataform's flow_id
const dfInstance = kf.app.getDataform("Product_Dataform_A00"); //Product_Dataform_A00 is the flow_id
//Set field values for specific fields of the dataform
let defaultValues = { location: "India" }; //Location is the the field_id of a field inside the dataform
//Pass the field config into the import sdk method
dfInstance.importCSV(defaultValues); //All records imported through this importer would have Location field set as India
Note:
- Default values are optional
- Any variables or parameter can also be mapped in
defaultValues
.- If a default value is set by the developer, end users cannot override it.
- Certain fields cannot be set as default, such as auto-calculated fields and sequence numbers.
Get board instance like
const boardInstance = kf.app.getBoard("case_id");
Launches the import CSV modal, where you can upload a CSV file and map its columns to the corresponding fields.
let defaultValues = { fieldId: "value" };
boardInstance.importCSV(defaultValues);
Consider a scenario where certain fields are not visible to the user (hidden in form visibility). In that case, default values can be used to populate data in these hidden fields.
// Get the board with the board's flow_id
const boardInstance = kf.app.getBoard("Asset_Tracking_A00"); // Asset_Tracking_A00 is the flow_id
// Set field values for specific fields of the board
let boardInstance = { location: "India" }; // Location is the the field_id of a field inside the board
// Pass the field config into the import sdk method
boardInstance.importCSV(defaultValues); // All records imported through this importer would have Location field set as India
Note:
- Default values are optional
- Any variables or parameter can also be mapped in
defaultValues
.- If a default value is set by the developer, end users cannot override it.
- Certain fields cannot be set as default, such as auto-calculated fields and sequence numbers.
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");