Using variables and parameters in application development
Modified 2 months ago
Abhiram
Understanding variables in application development
In application development, variables are used to store dynamic values that can be used anywhere within the application or on a specific page. They can be used by any user within the application. An app variable lets you define constant key-value pairs. These can be used to:
- Call out values within page components of a page.
- Filter data inside your workflows like board or process.
Creating variables
- Open an app in Kissflow.
- Go to Application builder.
- On the left navigation bar, go to Variables.
- Click New variable and enter the details of the variable.
- Variable name. The key name for your variable.
- Description. The description for your variable.
- Variable type. You can select the following data types: Number, Text, DateTime, and Boolean.
- Default value. Specify the default value for the key. The key value differs based on the data type.
- Click Create to save the variable.
On the variables page, all existing variables will be listed along with their name, description, data type, and default value. You can also edit or delete variables from this section. The scope of application variables is global, which means they can be accessed throughout the app.
Where are variables used?
When you add a page component like a button or label, you can use the app variables inside the fields as dynamic values or use them inside JavaScript functions. Once the application is deployed, these app variables will render during an app session.
Let's look at an example, an IT admin might want to keep track of the total number of IT assets available in an organization in order to effectively manage existing assets. To do this, they can store the count in a global variable called 'assets_master_count'. This variable can then be accessed and used anywhere within the application.
Input parameters
The input parameters are used to provide data to a field. They can be created within a page and passed from one page to another. Input parameters can be used within a page as well as passed to other pages. For example, you can pass an instance ID and activity instance ID to a process form from another process item using input parameters.
In the application builder > pages, the input parameters are found on the right side under the General properties tab (
).
To create an input parameter:
- Click the Add button (
). - Enter the parameter name.
- Add a description to the parameter if needed.
- Click Add to add the new parameter. You can also edit or delete a parameter later.
Event parameters
These are parameters passed from an event within a component. An event parameter can be created by selecting a component, going to the Event properties tab, adding an event, and selecting the action and page for redirection.
For example, an instance ID and activity ID can be passed through an onClick event that redirects to another page.
Configuration properties
These are constants that have the same value throughout the application across different environments such as development and production. They can be set with a default value and can be changed during runtime. For example, an API key can be a config property.
Comparing variables and parameters
Type | Scope | Where can it be defined? | Usage | Example |
Application variables | Across all environments of the application | Variables section in app builder, inside a page | JavaScript code | User email |
Input parameters | Page | General properties of the page body | Used across components, JavaScript code | Application ID |
Event parameters | Page/application depending upon whether it is passed on | Event properties of a component | JavaScript code, passing values to input parameters of another page | Instance ID |
Config property | Across all environments of the app | Inside an app, as a constant | JavaScript code | API key |
Usage in JavaScript editor
JavaScript code can be added to an event within a component by opening the code editor under the Event properties of the component and selecting the JavaScript action. Once the code editor is open, you can use application variables, popups, event parameters, and input parameters by double-clicking on their names to define them within the code.
In summary, variables, input parameters, event parameters, and configuration properties are all used in application development to store and pass data within the application. Each has its own scope, usage, and examples of when they might be used in a real-world application.
