### Project Setup and Installation

Source: https://developers.kissflow.com/components/formfield

Instructions for creating a new custom form field project, installing dependencies, and running a development build.

```APIDOC
## Project Setup and Installation

### Description
This section outlines the steps to initialize a new custom form field project using the Kissflow CLI, install necessary dependencies, and start a development server.

### Commands

1.  **Create a new component project:**
    ```bash
    npx create-kf-component@latest
    ```
    Follow the prompts to name your project and select 'form field' as the component type.

2.  **Navigate to the project directory:**
    ```bash
    cd <your-project-name>
    ```

3.  **Open the project in your code editor:**
    ```bash
    code .
    ```
    (Assumes VS Code is installed and in your PATH)

4.  **Install project dependencies:**
    ```bash
    npm install
    ```

5.  **Run the development build:**
    ```bash
    npm run dev
    ```
    This command starts a local development server to preview your custom form field.
```

--------------------------------

### Create Kissflow Component Package using npm

Source: https://developers.kissflow.com/components/page

Initializes a new Kissflow custom component package. Prompts for component name and framework (HTML/React). Installs dependencies, starts a development server, and builds a zip file for import into Kissflow. Supports only client-side ECMAScript modules (ES modules) and Universal Module Definition (UMD) formats.

```bash
npx create-kf-component@latest
cd componentname
npm install
npm run dev
npm run zip
```

--------------------------------

### Install Project Dependencies

Source: https://developers.kissflow.com/components/formfield

Installs all the necessary Node.js dependencies required for the custom form field project.

```bash
npm install
```

--------------------------------

### Run Development Build

Source: https://developers.kissflow.com/components/formfield

Starts the development server to build and preview the custom form field. This command is typically used during the development phase.

```bash
npm run dev
```

--------------------------------

### GET /kf.app.page.popup.getAllParameters

Source: https://developers.kissflow.com/app/page/popup

Retrieves all parameters associated with the active popup instance.

```APIDOC
## GET kf.app.page.popup.getAllParameters

### Description
Retrieves all parameters and their current values for the active popup.

### Method
GET

### Endpoint
kf.app.page.popup.getAllParameters()

### Response
#### Success Response (200)
- **Object** - Key-value pairs of parameter names and values.

#### Response Example
```json
{
  "parameterName": "Sample value",
  "parameterName2": "Sample value 2"
}
```
```

--------------------------------

### Navigate and Open Project Directory

Source: https://developers.kissflow.com/components/formfield

Commands to change the directory to the newly created project and open it in VS Code. Assumes VS Code is installed and configured in the system's PATH.

```bash
cd <your-project-name>
code .
```

--------------------------------

### Input Parameters Sample

Source: https://developers.kissflow.com/components/formfield

An example of the 'parameters' object, showing different types of input parameters (string, number, dropdown) configured for the custom form field.

```json
{
    "max_length": 100,
    "gender": {
        "Label 1": "Male",
        "Label 2": "Female"
    },
    "username": "Name"
}
```

--------------------------------

### updateValue Action Example

Source: https://developers.kissflow.com/components/formfield

Illustrates how to use the `updateValue` function provided via props to modify the field's value. This example shows incrementing a numeric value.

```javascript
const { value } = props;
onClick = () => {
    updateValue(value + 1);
};

```

--------------------------------

### Errors Object Example

Source: https://developers.kissflow.com/components/formfield

An example of the 'errors' object passed as a prop, containing an array of validation error messages to be displayed to the user.

```json
{
    "errors": ["Value is required", "Value must more than 50."]
}
```

--------------------------------

### GET /board

Source: https://developers.kissflow.com/app/board

Retrieves a specific board instance using the board's unique case ID.

```APIDOC
## GET /board

### Description
Retrieves a board instance from the application interface to enable further operations on the board.

### Method
GET

### Endpoint
kf.app.getBoard(caseId)

### Parameters
#### Path Parameters
- **caseId** (String) - Required - The unique identifier (flow_id) of the board.

### Request Example
const boardInstance = kf.app.getBoard("Asset_Tracking_A00");

### Response
#### Success Response (200)
- **boardInstance** (Object) - Returns the board instance object for subsequent operations.
```

--------------------------------

### Sample Field Properties Object

Source: https://developers.kissflow.com/components/formfield

An example of the 'field' object passed as a prop, containing configuration details like ID, name, type, and hint for the custom form field.

```json
{
    "field": {
        "id": "untitled_field",
        "name": "Custom email field",
        "type": "Text",
        "isRequired": false,
        "hint": "Enter a valid email (e.g., user@example.com)"
    }
}
```

--------------------------------

### Creating a New Custom Component

Source: https://developers.kissflow.com/components/page

Guides users through creating a new Kissflow custom component package using npm, including development and build steps.

```APIDOC
## Creating a New Custom Component

### Description
Use the `create-kf-component` CLI to scaffold a new custom component package. You can choose between plain HTML or React for your component.

### Commands

1. **Initialize Project:**
   ```bash
   npx create-kf-component@latest
   ```
   Follow the prompts to name your component and select the framework (HTML or React).

2. **Navigate and Install Dependencies:**
   ```bash
   cd componentname
   npm install
   ```

3. **Start Development Server:**
   ```bash
   npm run dev
   ```

4. **Build and Compress for Import:**
   ```bash
   npm run zip
   ```
   This command creates a zip file that can be directly imported into Kissflow.

### Notes
- This package is client-side only.
- Supports ECMAScript modules (es modules) and Universal Module Definition (UMD) formats.
```

--------------------------------

### Initialize Kissflow SDK in React/Vite Projects

Source: https://developers.kissflow.com/components/page

Installs and imports the Kissflow SDK as an npm module for use in existing React or Vite projects. Requires Node.js version 16 or above. The SDK must be initialized once at the project's entry point to be used across the codebase.

```bash
npm install @kissflow/lowcode-client-sdk
```

```javascript
import KFSDK from "@kissflow/lowcode-client-sdk";
let kf;
(async function () {
  kf = await KFSDK.initialize();
})();
```

--------------------------------

### Core FormField Component Structure

Source: https://developers.kissflow.com/components/formfield

Example of a basic React component for a custom form field, demonstrating how to use props for value and updates.

```APIDOC
## Core FormField Component Structure

### Description
This example shows a fundamental React component for a custom form field. It utilizes the `value` prop to display the current field content and the `updateValue` function from the `actions` prop to communicate changes back to the Kissflow form.

### Component Code

```jsx
import React from "react";

export function FormField(props) {
    const { value, actions } = props;
    const { updateValue } = actions;

    return (
        <input
            type="text"
            value={value}
            placeholder="User's name"
            onChange={(e) => updateValue(e.target.value)}
        />
    );
}
```

### Props

-   **`value`** (any): The current value of the form field.
-   **`actions`** (object): An object containing functions to interact with the Kissflow form.
    -   **`updateValue`** (function): A function to update the field's value. It accepts the new value as an argument.
```

--------------------------------

### Get Variable

Source: https://developers.kissflow.com/app/getvariable

Retrieves the value of a specified global variable.

```APIDOC
## GET /app/getVariable

### Description
Retrieves the value of a global variable using its unique identifier.

### Method
GET

### Endpoint
/app/getVariable

### Parameters
#### Query Parameters
- **variableId** (String) - Required - The unique identifier of the global variable to retrieve.

### Request Example
```
GET /app/getVariable?variableId=myVariable
```

### Response
#### Success Response (200)
- **value** (Any) - The value of the global variable. The data type corresponds to the variable's type (e.g., String for Text, Integer for Number, Boolean for Boolean).

#### Response Example
```json
{
  "value": "some_text_value"
}
```

#### Error Response (400)
- **error** (String) - Description of the error if the variableId is not found or invalid.

#### Error Response Example
```json
{
  "error": "Variable with the provided ID not found."
}
```
```

--------------------------------

### Get Rows

Source: https://developers.kissflow.com/form/table/getrows

Retrieves a list of row instances from a specified table instance.

```APIDOC
## Get Rows

### Description
Returns list of row instances from the table instance.

### Method
GET

### Endpoint
/websites/developers_kissflow/tableInstance/getRows

### Parameters
#### Query Parameters
- **tableInstance** (object) - Required - The table instance to retrieve rows from.

### Request Example
```javascript
const rows = await tableInstance.getRows();
```

### Response
#### Success Response (200)
- **rows** (array) - A list of row objects.

#### Response Example
```json
{
  "rows": [
    {
      "id": "row1",
      "data": { "column1": "value1", "column2": "value2" }
    },
    {
      "id": "row2",
      "data": { "column1": "value3", "column2": "value4" }
    }
  ]
}
```
```

--------------------------------

### GET /getDataform

Source: https://developers.kissflow.com/app/dataform

Retrieves an instance of a dataform using its unique identifier.

```APIDOC
## GET /getDataform

### Description
Initializes and retrieves a dataform instance to perform operations within the app.

### Method
GET

### Endpoint
kf.app.getDataform(dataformId)

### Parameters
#### Path Parameters
- **dataformId** (String) - Required - The unique flow_id of the dataform.

### Request Example
let dataformInstance = kf.app.getDataform("Product_Dataform_A00");

### Response
#### Success Response (200)
- **dataformInstance** (Object) - Returns an instance of the requested dataform.
```

--------------------------------

### Cell Focused State Example (JSON)

Source: https://developers.kissflow.com/components/formfield

This JSON snippet demonstrates how to set the 'focused' property to 'true' for a cell. When 'focused' is true, the cell is highlighted with a blue outline, indicating it's ready for user input. Setting it to false puts the cell in a display-only mode.

```JSON
{
    "cell": {
        "focused": true
    }
}
```

--------------------------------

### GET /context/getTable

Source: https://developers.kissflow.com/form/gettable

Retrieves an instance of the Table class for a specific table ID, allowing for CRUD operations on table rows.

```APIDOC
## GET /context/getTable

### Description
Returns an instance of the Table class, providing access to methods such as addRow(), addRows(), deleteRow(), deleteRows(), getRow(), getRows(), and toJSON().

### Method
GET

### Endpoint
kf.context.getTable(tableId)

### Parameters
#### Path Parameters
- **tableId** (String) - Required - Unique Id of the table.

### Request Example
const worktableInstance = kf.context.getTable("work_table1");

### Response
#### Success Response (200)
- **tableInstance** (Object) - An instance of the Table class ready for operations.

#### Response Example
{
  "status": "success",
  "message": "Table instance retrieved successfully"
}
```

--------------------------------

### Get Dataform Instance using getDataform

Source: https://developers.kissflow.com/app/dataform

Retrieves a dataform instance by its ID from the app's interface. This is the initial step to interact with a specific dataform.

```javascript
let dataformInstance = kf.app.getDataform(dataformId);
```

--------------------------------

### Get Table Instance using JavaScript

Source: https://developers.kissflow.com/form/gettable

Retrieves an instance of a table from Kissflow context using its unique ID. This instance provides methods to manipulate table data, such as adding or deleting rows. It requires the table ID as a string parameter.

```javascript
const tableInstance = kf.context.getTable(fieldId);
```

```javascript
const worktableInstance = kf.context.getTable("work_table1");
```

--------------------------------

### Get Row Instance using rowId - JavaScript

Source: https://developers.kissflow.com/form/table/getrow

Retrieves a row instance from a specified table instance using its unique rowId. The row instance provides methods to interact with the row's data, such as updating or getting field values. This is a core function for data manipulation within Kissflow tables.

```javascript
let rowInstance = tableInstance.getRow(rowId);
```

```javascript
let tableInstance = kf.context.getTable("work_table1");
let rowInstance = tableInstance.getRow("table_row_Id");
let yoe = await rowInstance.getField("table_field2");
rowInstance.updateField({ table_field2: yoe + 1 });
```

--------------------------------

### React FormField Component Example

Source: https://developers.kissflow.com/components/formfield

A basic React component for a custom form field in Kissflow. It displays a text input and uses the `updateValue` function from props to communicate changes back to the Kissflow form.

```jsx
import React from "react";


export function FormField(props) {
    const { value, actions } = props;
    const { updateValue } = actions;
    return (
        <input
            type="text"
            value={value}
            placeholder="User's name"
            onChange={(e) => updateValue(e.target.value)}
        />
    );
}
```

--------------------------------

### Get Decision Table Instance

Source: https://developers.kissflow.com/app/decisiontable

Retrieves a decision table instance using its ID from the app's interface. This is the first step to interact with a decision table.

```javascript
let decisionTableInstance = kf.app.getDecisionTable(decisionTableId);
```

--------------------------------

### Readonly Property Example

Source: https://developers.kissflow.com/components/formfield

A sample JSON object demonstrating the 'readonly' property, which, when set to true, makes the custom form field uneditable.

```json
{ "readonly": true }
```

--------------------------------

### Get Field Value

Source: https://developers.kissflow.com/form/getfield

This endpoint allows you to retrieve the current value of a specific form field by providing its unique ID.

```APIDOC
## Get Field Value

### Description
To retrieve the current value of a form field.

### Method
GET (conceptual, as this is a client-side SDK method)

### Endpoint
`kf.context.getField(fieldId)`

### Parameters
#### Path Parameters
- **fieldId** (String) - Required - Unique Id of the field.

### Request Example
```javascript
// Using Promises
kf.context.getField("yourFieldId").then((res) => { console.log(res); });

// Using async/await
let value = await kf.context.getField("yourFieldId");
console.log(value);
```

### Response
#### Success Response (200)
- **value** (Varies) - The value of the field. The data type varies based on the field type (e.g., String, Number, Integer, Boolean, Array, Object).

#### Response Example
```json
3
```
```

--------------------------------

### Get Local Variable

Source: https://developers.kissflow.com/app/page/getvariable

Retrieves the value of a specified local page variable. Page variables are scoped to the page they are declared in and do not persist across sessions.

```APIDOC
## Get Local Variable

### Description
This command lets you retrieve the value of a local variable. The scope of page variables are limited to the page they are declared in. Page variables do not persist like global variables, therefore revisiting a page will reinitialize all of its page variables.

### Method
GET (or equivalent for client-side execution)

### Endpoint
N/A (Client-side function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const pageVariable1 = await kf.app.page.getVariable("variableId");
```

### Response
#### Success Response (200)
- **variableValue** (various) - The value of the requested local variable. The data type depends on the variable's type (Text: String, Number: Integer, DateTime: String, Boolean: Boolean).

#### Response Example
```json
{
  "variableValue": "Example Value"
}
```

### Example Usage
Local variables can be used to store the individual ratings given for different criteria (e.g., communication, teamwork) within the performance review form. Using local variables for the individual ratings would make it easier to calculate the final rating for performance evaluation.
```

--------------------------------

### Get Rows - JavaScript

Source: https://developers.kissflow.com/form/table/getrows

Retrieves a list of all row instances from a table instance. This method is asynchronous and returns a Promise that resolves to an array of row objects. Ensure the tableInstance is properly initialized before calling this method.

```javascript
const rows = await tableInstance.getRows();
```

--------------------------------

### Integrating Kissflow SDK via HTML/JS

Source: https://developers.kissflow.com/components/page

Instructions for importing and initializing the Kissflow SDK directly in an HTML file for use with vanilla JavaScript.

```APIDOC
## Integrating Kissflow SDK via HTML/JS

### Description
Import the Kissflow SDK as a UMD file directly into your HTML for use with plain HTML and vanilla JavaScript.

### HTML Import
Add the following script tag to your HTML file:

```html
<script src="https://unpkg.com/@kissflow/lowcode-client-sdk@latest/dist/kfsdk.umd.js"></script>
```

### JavaScript Initialization
Initialize the SDK in your JavaScript file. The SDK will be available under the `window.kf` object.

```javascript
let kf;

window.onload = async function () {
  kf = await window.kf.initialize();
};
```
```

--------------------------------

### Build and Import

Source: https://developers.kissflow.com/components/formfield

Instructions on how to package the custom form field into a zip file for import into Kissflow.

```APIDOC
## Build and Import Custom Form Field

### Description
Once your custom form field development is complete, you can generate a distributable package and import it into your Kissflow application.

### Build Command

To create a `.zip` file containing your custom form field component, run the following command in your project's root directory:

```bash
npm run zip
```

This command will compile your project and package the necessary files into a zip archive.

### Importing into Kissflow

After generating the `.zip` file, you can import it directly into Kissflow as a custom form field through the platform's interface for custom components.
```

--------------------------------

### Import and Initialize Kissflow SDK in HTML/JS

Source: https://developers.kissflow.com/components/page

Imports the Kissflow SDK as a UMD file for use in plain HTML and vanilla JavaScript projects. The SDK is included via a script tag, and then initialized within a JavaScript function, typically on window load.

```html
<script src="https://unpkg.com/@kissflow/lowcode-client-sdk@latest/dist/kfsdk.umd.js"></script>
```

```javascript
let kf;
window.onload = async function () {
  kf = await window.kf.initialize();
};
```

--------------------------------

### Integrating Kissflow SDK as an npm Module

Source: https://developers.kissflow.com/components/page

Instructions for integrating the Kissflow SDK into an existing project (e.g., React) as an npm module.

```APIDOC
## Integrating Kissflow SDK as an npm Module

### Description
Install and import the Kissflow SDK into your existing project to convert it into a Kissflow custom component. This method is recommended for React projects and alternative for non-React/Vite frameworks.

### Installation
```bash
npm install @kissflow/lowcode-client-sdk
```

### Prerequisites
- Node.js version 16 or above.

### Initialization
Import and initialize the SDK at the entry point of your project. It's recommended to use a single instance across your codebase.

```javascript
import KFSDK from "@kissflow/lowcode-client-sdk";

let kf;

(async function () {
  kf = await KFSDK.initialize();
})();
```
```

--------------------------------

### POST /kf.app.page.openPopup

Source: https://developers.kissflow.com/app/page/popup

Opens a new popup window in the current page with optional parameters.

```APIDOC
## POST kf.app.page.openPopup

### Description
Opens a popup window using its unique ID and optional configuration parameters.

### Method
POST

### Endpoint
kf.app.page.openPopup(popupId, popupParameters)

### Parameters
#### Path Parameters
- **popupId** (String) - Required - Unique ID of the popup.

#### Request Body
- **popupParameters** (Object) - Optional - Configuration object for the popup instance.

### Request Example
```javascript
let popupParameters = {
  instanceId: "acdnd",
  activityInstanceId: "mnop"
};
kf.app.page.openPopup("popup1", popupParameters);
```

### Response
#### Success Response (200)
- **Popup Instance** (Object) - Returns an instance of the Popup class.
```

--------------------------------

### POST /board/importCSV

Source: https://developers.kissflow.com/app/board

Launches the CSV import modal and allows setting default values for fields during the import process.

```APIDOC
## POST /board/importCSV

### Description
Launches the import CSV modal, allowing users to upload files and map columns. Developers can provide default values for fields, which is particularly useful for hidden fields.

### Method
POST

### Endpoint
boardInstance.importCSV(defaultValues)

### Parameters
#### Request Body
- **defaultValues** (Object) - Optional - An object where keys are field IDs and values are the data to be set.

### Request Example
let defaultValues = { "location": "India" };
boardInstance.importCSV(defaultValues);

### Response
#### Success Response (200)
- **status** (String) - Confirmation that the import modal has been launched with the provided configuration.
```

--------------------------------

### Form SDK Methods

Source: https://developers.kissflow.com/form/about

Overview of the available methods for interacting with form components in Kissflow.

```APIDOC
## Form SDK Methods

### Description
The Form SDK provides methods to interact with form components. Supported operations are limited to reading and updating existing components.

### Methods
- **getField(field_id)**: Retrieves a specific field object.
- **updateField(field_id, value)**: Updates the value of a specific field.
- **getTable(table_id)**: Retrieves a specific table object.
- **toJSON()**: Converts the form data into a JSON representation.

### Constraints
- **Create/Delete**: Not supported via SDK.
- **Support**: Read and update operations only.
```

--------------------------------

### Create Kissflow Custom Form Field Project

Source: https://developers.kissflow.com/components/formfield

Command to initialize a new custom form field project using the Kissflow CLI. This sets up the basic project structure and dependencies.

```bash
npx create-kf-component@latest
```

--------------------------------

### POST /importCSV

Source: https://developers.kissflow.com/app/dataform

Launches the CSV import interface for a specific dataform instance with optional default values.

```APIDOC
## POST /importCSV

### Description
Opens the CSV import popup and allows setting default values for fields, which cannot be overridden by end users.

### Method
POST

### Endpoint
dataformInstance.importCSV(defaultValues)

### Parameters
#### Request Body
- **defaultValues** (Object) - Optional - An object where keys are field IDs and values are the data to be pre-populated.

### Request Example
let defaultValues = { location: "India" };
dataformInstance.importCSV(defaultValues);

### Response
#### Success Response (200)
- **status** (String) - Triggers the CSV import UI.
```

--------------------------------

### Accessing Form Fields with kf.context

Source: https://developers.kissflow.com/context

Demonstrates how to retrieve a field value from a form instance using the kf.context.getField method.

```javascript
let fieldId = "Purchase_request_number";
let requestNumber = await kf.context.getField(fieldId);
```

--------------------------------

### Manage Kissflow Popup Parameters

Source: https://developers.kissflow.com/app/page/popup

Provides methods to interact with parameters of an active Kissflow popup. `getAllParameters()` retrieves all parameters and their values as an object, while `getParameter(parameterId)` fetches the value of a specific parameter identified by its ID. Both methods are asynchronous.

```javascript
let allParameters = await kf.app.page.popup.getAllParameters();
```

```javascript
let value = await kf.app.page.popup.getParameter("parameterId");
```

--------------------------------

### Retrieve All Page Parameters

Source: https://developers.kissflow.com/app/page/inputparameters

Fetches all parameters currently defined on the page. Returns a key-value object where keys are parameter names and values are their corresponding data.

```javascript
let allParameters = await kf.app.page.getAllParameters();
```

--------------------------------

### Component Lifecycle Event: onMount

Source: https://developers.kissflow.com/app/page/component

Registers a listener function to be executed when the component is mounted or re-mounted. Essential for initializing component state on page load.

```javascript
componentInstance.onMount(() => {
  componentInstance.setActiveTab(2);
});
```

--------------------------------

### Using Input Parameters with WatchParams

Source: https://developers.kissflow.com/components/page

Explains how to use the `watchParams` function to handle input parameters mapped to custom page components within Kissflow.

```APIDOC
## Using Input Parameters with WatchParams

### Description
To make input parameters defined in the Kissflow UI work with your custom page component, you must implement the `watchParams` function in your component's code. This function listens for changes in the mapped parameters.

### Syntax
```javascript
kf.context.watchParams(callbackFunction);
```

### Example
```javascript
function onParamsChange(data) {
  console.info("Mapped data changes", data);
  // Implement your logic here based on the received data
}

kf.context.watchParams(onParamsChange);
```

### Notes
- Ensure `watchParams` is called only once within your component to avoid unintended behavior.
```

--------------------------------

### Generate Deployable Zip File

Source: https://developers.kissflow.com/components/formfield

Generates a .zip file of the custom form field, which can then be imported directly into Kissflow.

```bash
npm run zip
```

--------------------------------

### Updating Page Variables with kf.context

Source: https://developers.kissflow.com/context

Illustrates how to update a local page variable using the kf.context.updateVariable method during page lifecycle events.

```javascript
// Make some api call and change the local variable based on that
kf.context.updateVariable("variableName", "some value");
```

--------------------------------

### Parameters Prop

Source: https://developers.kissflow.com/components/formfield

Details on the `parameters` prop, which includes custom input configurations for the form field.

```APIDOC
## Parameters Prop

### Description
The `parameters` prop contains custom input parameters that you define when setting up your custom form field component in the Kissflow UI. These parameters can be of type String, Number, or a static dropdown, allowing for flexible configuration.

### Sample `parameters` Object

```json
{
    "max_length": 100,
    "gender": {
        "Label 1": "Male",
        "Label 2": "Female"
    },
    "username": "Name"
}
```

### Usage

These parameters can be accessed within your React component to customize its behavior or appearance based on the specific settings chosen by the form designer. For example, `max_length` could be used to set the `maxLength` attribute on an input element.
```

--------------------------------

### Open a Kissflow Popup

Source: https://developers.kissflow.com/app/page/popup

Opens a new popup window within the current page. It accepts a unique popup ID and an optional object for parameters that can be used to customize the popup's content or behavior. The method returns an instance of the Popup class.

```javascript
let popupParameters = {
  instanceId: "acdnd",
  activityInstanceId: "mnop",
};
kf.app.page.openPopup("popup1", popupParameters);
```

--------------------------------

### Open a specific page in Kissflow

Source: https://developers.kissflow.com/app/openpage

This snippet demonstrates how to use the kf.app.openPage method to navigate to a specific page using its ID. It returns a page instance that can be used for subsequent operations.

```javascript
const pageInstance = kf.app.openPage("pageId");
```

--------------------------------

### Field Properties

Source: https://developers.kissflow.com/components/formfield

Explanation of the `field` object prop, which contains configuration details set in the Kissflow UI.

```APIDOC
## Field Properties

### Description
The `field` prop provides your custom component with metadata about the form field as configured in the Kissflow form builder. This includes its ID, name, type, and other settings that influence its behavior and appearance.

### Sample `field` Object

```json
{
    "field": {
        "id": "untitled_field",
        "name": "Custom email field",
        "type": "Text",
        "isRequired": false,
        "hint": "Enter a valid email (e.g., user@example.com)"
    }
}
```

### Property Definitions

-   **`id`** (string): A unique identifier for the form field.
-   **`name`** (string): The display name of the field.
-   **`type`** (string): The data type of the field (e.g., 'Text', 'Number', 'Boolean', 'Object', 'Array of objects', 'Array of strings').
-   **`isRequired`** (boolean): Indicates if the field must be filled out.
-   **`hint`** (string): Help text or a tooltip displayed for the field.
```

--------------------------------

### Import CSV with Default Values

Source: https://developers.kissflow.com/app/board

Launches the CSV import modal and allows setting default values for fields. This is useful for populating hidden fields or setting static values for imported records.

```javascript
const boardInstance = kf.app.getBoard("Asset_Tracking_A00");
let defaultValues = { location: "India" };
boardInstance.importCSV(defaultValues);
```

--------------------------------

### Import CSV Data with Default Values

Source: https://developers.kissflow.com/app/dataform

Launches the CSV import popup for a dataform, allowing users to upload a CSV file and map columns to form fields. It supports setting default values for fields, which cannot be overridden by end-users.

```javascript
let defaultValues = { fieldId: "value" };
dataformInstance.importCSV(defaultValues);
```

```javascript
// 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 the Location field set as India.
```

--------------------------------

### Component Visibility and Refresh Controls

Source: https://developers.kissflow.com/app/page/component

Methods to manage the visual state of a component. These allow developers to refresh, hide, or show components dynamically on the page.

```javascript
componentInstance.refresh();
componentInstance.hide();
componentInstance.show();
```

--------------------------------

### Retrieve Component Instance

Source: https://developers.kissflow.com/app/page/component

Retrieves a component instance using its unique ID. This instance provides access to various control methods and lifecycle hooks.

```javascript
let componentInstance = await kf.app.page.getComponent(componentId);
```

--------------------------------

### POST /kf.app.page.popup.close

Source: https://developers.kissflow.com/app/page/popup

Closes the active popup window.

```APIDOC
## POST kf.app.page.popup.close

### Description
Closes an active popup that is currently open in the page.

### Method
POST

### Endpoint
kf.app.page.popup.close() or popupInstance.close()

### Response
#### Success Response (200)
- **void** - Closes the popup window.
```

--------------------------------

### Retrieve Board Instance

Source: https://developers.kissflow.com/app/board

Retrieves a specific board instance using the flow ID. This instance is required to perform further operations like CSV imports.

```javascript
const boardInstance = kf.app.getBoard("case_id");
```

--------------------------------

### Update Multiple Global Variables with kf.app.setVariable

Source: https://developers.kissflow.com/app/setvariable

Updates the values of multiple global variables simultaneously by passing an object where keys are variable IDs and values are their new data types. This is efficient for bulk updates.

```javascript
kf.app.setVariable({
  variableId: "new value",
  variableId2: 1,
});
```

--------------------------------

### Accessing Child Table Row Fields with kf.context

Source: https://developers.kissflow.com/context

Shows how to retrieve a specific column value within a child table row context using kf.context.getField.

```javascript
let columnId = "Quantity_of_Product";
let quantity = await kf.context.getField(columnId);
```

--------------------------------

### Watch Input Parameters in Kissflow Custom Components

Source: https://developers.kissflow.com/components/page

Implements the `watchParams` function to enable input parameters defined in the Kissflow UI to interact with your custom page component. This function listens for changes in mapped data and should be called only once.

```javascript
function onParamsChange(data) {
  console.info("Mapped data changes", data);
  // Your logic goes here
}
kf.context.watchParams(onParamsChange);
```

--------------------------------

### Add Multiple Rows to Table Instance (JavaScript)

Source: https://developers.kissflow.com/form/table/addrows

This function adds multiple rows to a table instance. It accepts an array of objects, where each object represents a row and its keys correspond to column IDs. Ensure the payload matches the expected column types.

```javascript
tableInstance.addRows([
  { columnId1: value, columnId2: value }, // row 1
  { columnId1: value, columnId2: value }, // row 2
]);
```

```javascript
const worktableInstance = kf.context.getTable(tableId);
let accumulator = [];
employeeData.forEach(function(data) {
    accumulator.push({
        table_field1: data["Company"],
        table_field2: data["YOE"]
    });
});
await worktableInstance.addRows(accumulator);
```

--------------------------------

### Cell Focused State

Source: https://developers.kissflow.com/components/formfield

Controls the visual highlight and input readiness of a cell.

```APIDOC
## Cell Focused State

### Description
When the property `focused` is true, the cell is highlighted with a blue outline, indicating that it is ready to take a field value as the user’s input. When it is false, the cell will be in a display-only mode.

### Method
Not applicable (This describes a property within a data structure, not an API endpoint).

### Endpoint
Not applicable

### Parameters
#### Request Body
- **cell** (object) - Required - The cell object to configure.
  - **focused** (boolean) - Required - Determines if the cell is focused. `true` highlights the cell and makes it ready for input; `false` sets it to display-only mode.

### Request Example
```json
{
    "cell": {
        "focused": true
    }
}
```

### Response
#### Success Response (200)
- **cell** (object) - The updated cell object.
  - **focused** (boolean) - The current focused state of the cell.

#### Response Example
```json
{
    "cell": {
        "focused": true
    }
}
```
```

--------------------------------

### POST /tableInstance/addRow

Source: https://developers.kissflow.com/form/table/addrow

Adds a single row to a specified table instance by mapping column IDs to their respective values.

```APIDOC
## POST /tableInstance/addRow

### Description
Adds a single row to the specified table instance. The payload requires an object where keys are column IDs and values are the corresponding field data.

### Method
POST

### Endpoint
tableInstance.addRow(payload)

### Parameters
#### Request Body
- **Payload** (Object) - Required - An object where keys represent the columnId (string) and values correspond to their respective field types.

### Request Example
{
  "table_field1": "Microsoft",
  "table_field2": "2 years"
}

### Response
#### Success Response (200)
- **status** (string) - Confirmation of row addition.

#### Response Example
{
  "status": "success"
}
```

--------------------------------

### Update Multiple Local Variables with JavaScript

Source: https://developers.kissflow.com/app/page/setvariable

Updates multiple local variables simultaneously using an object containing variable IDs and their corresponding new values. This is efficient for setting several variables at once, such as during form submission or initialization.

```javascript
kf.app.page.setVariable({
  variableId: "new value",
  variableId2: 1,
});
```

--------------------------------

### Retrieve Local Variable Value (JavaScript)

Source: https://developers.kissflow.com/app/page/getvariable

This command retrieves the value of a local variable declared within the current page. Local variables are scoped to the page and do not persist across sessions. The function takes a 'variableId' string as input and returns the variable's value, which can be a String, Integer, Boolean, or String (for DateTime).

```javascript
const pageVariable1 = await kf.app.page.getVariable("variableId");
```

--------------------------------

### Retrieve Specific Page Parameter

Source: https://developers.kissflow.com/app/page/inputparameters

Fetches the value of a specific page parameter by providing its unique parameter ID. Returns the value associated with the requested parameter.

```javascript
let value = await kf.app.page.getParameter("parameterId");
```

--------------------------------

### Readonly Property

Source: https://developers.kissflow.com/components/formfield

How to make a custom form field read-only using the `readonly` prop.

```APIDOC
## Readonly Property

### Description
The `readonly` prop, when set to `true`, will render the custom form field in a non-editable state, preventing users from making changes to its value.

### Sample `readonly` Prop

```json
{
    "readonly": true
}
```

### Usage

This prop is typically passed down from the parent Kissflow component and can be used to conditionally disable input elements within your custom form field component.
```

--------------------------------

### Retrieve Global Variable Value

Source: https://developers.kissflow.com/app/getvariable

This snippet demonstrates how to use the kf.app.getVariable method to fetch the value of a specific global variable by its ID. It returns the value in its original data type, such as a string, number, or boolean.

```javascript
const appVariable1 = await kf.app.getVariable("variableId");
```

--------------------------------

### Evaluate Decision Table

Source: https://developers.kissflow.com/app/decisiontable

Evaluates a decision table using the retrieved instance and a payload object. The payload contains condition field IDs and their corresponding values to determine the output.

```javascript
let decisionTableInstance = kf.app.getDecisionTable(decisionTableId);
let payload = { conditionField1: "value", conditionField2: "value" };
await decisionTableInstance.evaluate(payload);
```

```javascript
let decisionTableInstance = kf.app.getDecisionTable("Loan_decision_table");
let decisionOutput = await decisionTableInstance.evaluate({
  Age_conditionID: 18,
});
```

--------------------------------

### Close a Kissflow Popup

Source: https://developers.kissflow.com/app/page/popup

Closes the currently active popup window. This can be done either by calling `kf.app.page.popup.close()` directly or by using the `close()` method on a popup instance obtained from `openPopup()`.

```javascript
kf.app.page.popup.close();
```

```javascript
popupInstance.close();
```

--------------------------------

### Add Row to Kissflow Table Instance

Source: https://developers.kissflow.com/form/table/addrow

Adds a single row to a specified table instance. The payload object should contain column IDs as keys and their corresponding values based on field types. This method is used to populate tables with new data entries.

```javascript
tableInstance.addRow({ columnId1: value, columnId2: value });
```

```javascript
worktableInstance.addRow({ table_field1: "Microsoft", table_field2: "2 years" });
```

--------------------------------

### Cell Properties

Source: https://developers.kissflow.com/components/formfield

Information about the `cell` object, which represents properties related to the cell view in a sheet layout.

```APIDOC
## Cell Properties

### Description
The `cell` object provides properties related to the display and behavior of the custom form field when rendered within a sheet or table view in Kissflow. This allows for specific styling or data handling relevant to tabular data.

### Sample `cell` Object

(Specific structure for `cell` object not provided in the source text, but it would typically contain properties relevant to cell rendering like styling, alignment, etc.)

### Usage

This prop can be used to adapt the rendering of your custom field to fit seamlessly within Kissflow's sheet views.
```

--------------------------------

### Update Single Global Variable with kf.app.setVariable

Source: https://developers.kissflow.com/app/setvariable

Updates the value of a single global variable in the Kissflow app. It takes the variable ID and its new value as parameters. This is useful for dynamic updates based on user actions or application logic.

```javascript
kf.app.setVariable(variableId, value);
```

--------------------------------

### Update Single Local Variable with JavaScript

Source: https://developers.kissflow.com/app/page/setvariable

Updates a single local variable with a new value. This function is useful for storing temporary data during validation or processing steps within a Kissflow application. It takes the variable ID and the new value as parameters.

```javascript
kf.app.page.setVariable(variableId, value);
```

--------------------------------

### Errors Prop

Source: https://developers.kissflow.com/components/formfield

How validation errors are passed to the custom form field component.

```APIDOC
## Errors Prop

### Description
The `errors` prop is an array of strings that contains validation messages. If a user's input fails validation rules defined in Kissflow (e.g., required field, format mismatch), these messages will be passed to your component, allowing you to display them to the user.

### Sample `errors` Array

```json
{
    "errors": [
        "Value is required",
        "Value must be more than 50 characters."
    ]
}
```

### Usage

Your custom form field component can iterate over this array and display the error messages appropriately, often near the input field itself, to guide the user.
```

--------------------------------

### Tab Component: Set Active Tab

Source: https://developers.kissflow.com/app/page/component

Sets a specific tab as active by its index. The index is 1-based.

```javascript
componentInstance.setActiveTab(2);
```

--------------------------------

### Delete Rows

Source: https://developers.kissflow.com/form/table/deleterows

Deletes multiple rows from the specified table instance.

```APIDOC
## Delete Rows

### Description
Deletes multiple rows from the specified table instance.

### Method
POST

### Endpoint
/websites/developers_kissflow/deleteRows

### Parameters
#### Request Body
- **rows** (Array of Strings) - Required - An array of row IDs to be deleted.

### Request Example
```json
{
  "rows": ["rowId1", "rowId2"]
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message indicating successful deletion.

#### Response Example
```json
{
  "message": "Rows deleted successfully."
}
```
```

--------------------------------

### Delete Row from Table Instance (JavaScript)

Source: https://developers.kissflow.com/form/table/deleterow

Deletes a single row from a specified table instance using its unique row ID. This function requires a valid rowId string as input. It does not return any specific value but performs the deletion operation.

```javascript
tableInstance.deleteRow(rowId);
```

```javascript
worktableInstance.deleteRow("table_row_Id");
```

--------------------------------

### Delete Multiple Rows - JavaScript

Source: https://developers.kissflow.com/form/table/deleterows

Deletes multiple rows from a specified table instance by passing an array of row IDs to the deleteRow method. Ensure the tableInstance object is correctly initialized and the row IDs are valid.

```javascript
let rows = ["rowId1", "rowId2"];
tableInstance.deleteRow(rows);
```

--------------------------------

### updateValue Action

Source: https://developers.kissflow.com/components/formfield

Details on the `updateValue` function provided to the custom form field component for modifying its state.

```APIDOC
## updateValue Action

### Description
The `updateValue` function is part of the `actions` prop passed to your custom form field component. It allows your component to send updates to the Kissflow form whenever the field's value changes.

### Function Signature

```javascript
updateValue(newValue: any): void
```

### Parameters

-   **`newValue`** (any): The new value for the form field. This can be a string, number, boolean, object, array of strings, or array of objects, depending on the field type configured in Kissflow.

### Example Usage

```javascript
// Inside your FormField component
const { value, actions } = props;
const { updateValue } = actions;

const handleClick = () => {
    // Example: Incrementing value if it's a number
    updateValue(value + 1);
};
```

This example demonstrates how `updateValue` can be used in response to an event, such as a button click or input change, to update the field's state within the Kissflow application.
```

--------------------------------

### Retrieve Form Field Value using Kissflow API

Source: https://developers.kissflow.com/form/getfield

Retrieves the current value of a specified form field. The method accepts a fieldId string and returns the value, with the data type dependent on the specific field type.

```javascript
kf.context.getField(fieldId).then((res) => {
  console.log(res);
});
```

```javascript
let value = await kf.context.getField(fieldId);
```

```javascript
// Example: Retrieve rating field value
let value = await kf.context.getField("ratingField");
// Output: 3
```

--------------------------------

### Delete Row

Source: https://developers.kissflow.com/form/table/deleterow

Deletes a single row from the specified table instance using its row ID.

```APIDOC
## DELETE /api/tables/{tableInstanceId}/rows/{rowId}

### Description
Deletes a single row from the specified table instance.

### Method
DELETE

### Endpoint
`/api/tables/{tableInstanceId}/rows/{rowId}`

### Parameters
#### Path Parameters
- **tableInstanceId** (String) - Required - The ID of the table instance from which to delete the row.
- **rowId** (String) - Required - The ID of the row to delete.

### Request Example
```javascript
tableInstance.deleteRow("table_row_Id");
```

### Response
#### Success Response (200)
- **message** (String) - Confirmation message indicating the row was deleted successfully.

#### Response Example
```json
{
  "message": "Row deleted successfully."
}
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.