Skip Ribbon Commands
Skip to main content
Sign In

Advanced customizations using custom scripts

Advanced customizations using custom scripts


 

Feature Overview

Script editor feature is part of KWizCom Modern Forms (Enterprise edition).

KWizCom modern forms includes a javascript api which enables you to add custom logic to the KWizCom forms.     
To open the script editor, open one of the list items in view/edit form, then click the gear icon on the top-right side of the form and select "Script editor":

 
This will open the script editor popup:
 
In the script editor you can select one of the code samples and then modify it according to your requirements.
You can also write your own event handler, by using KWizCom api described in the "Help" tab.
 

Implementing common requirements using code samples

The script editor includes code samples that enable you to easily implement various common requirements. The following sections describe common use-cases and how you can use the available code samples to quickly implement them.
 

Get additional columns from lookup item

In this scenario we have a New/Edit form that includes a lookup column, we want to display additional columns from the lookup list as R/O fields that get updated when user changes the selected lookup item.
 

exampleIn the following purchase order form, we have the "Select Vendor" lookup column:
 

The requirement: when user selects a vendor in the lookup column, the "Vendor phone" and "Vendor email" fields should be automatically updated with the selected vendor's phone and emails, and also appear as R/O.

To implement this scenario, select the "Get additional information from lookup item" sample code:
 
We need to update the variables which appear at the beginning part of the script according to the column names we have in our list.
In our example, we have to change the following variable values:
var lookupFieldName- update the name of your lookup column ("Select Vendor" in our example)
var fieldsToGet- this is an array of names of the lookup columns you want to get their valkue from the lookup list (["Email", "Phone"] in our example)
var fieldsToSet - this is an array of field names in our form that you want to update with the retrieved values from the lookup list, ["Vendor Email", "Vendor phone"] in our example.
The second script we should add is "Make the target fields appear read-only", which enables setting requested fields to be displayed as read-only fields. After you select that script, you need to update the following variable value to:
 
var fieldsToDisable= ["Vendor email", "Vendor phone"]
 
IMPORTANT: you need to use the internal column names, which might be different than their displayed names.
 
After you update the variable values in the script, save it and refresh the form. Now everytime user selects a vendor, the Vendor phone and Vendor email fields get updated with the selected vendor's phone and email values, and appear as R/O fields:
 

"Live" calculated fields

In this scenario we have a New/Edit form, where some fields should behave as calculated fields. Unlike SharePoint out-of-the-box calculated fields which do not appear on New/Edit forms and are updated only when you save the item, in our case these are "Live" calculated fields, so they get updated immediatelly when user updates other fields on which the calculated fields depend.
exampleIn the following Order form, we have the "Total" column:
The requirement: when user updates the Quantity and Price fields, the Total field should be automatically updated to Quantity X Price, and also appear as R/O.
To implement this scenario, select the "Calculate Total = Price X Quantity" sample code:
We need to update the variables which appear at the beginning part of the script according to the column names we have in our list.
In our example, we have to change the following variable values:

var priceFieldName = "Price"
var quantityFieldName = "Quantity"
var totalPriceWithTaxFieldName = "Total"
var taxFieldName = ""  (If you want also to display a Tax field, update the name of that field, otherwise replace with empty string)
 
The second script we should add is "Make the target fields appear read-only", which enables setting requested fields to be displayed as read-only fields. After you select that script, you need to update the following variable value to:

var fieldsToDisable= ["Total"]
 
IMPORTANT: you need to use the internal column names, which might be different than their displayed names.
After you update the variable values in the script, save it and refresh the form. Now everytime you update the Price and Quantity fields, the Total field gets updated with the result of Price X Quantity, and also appears R/O:
 
 

"Live" calculated fields in Repeating Rows column

In this scenario we have a New/Edit form that includes a Repeating Rows column. 
Some of the fields should behave as real-time calculated fields, meaning: immediatelly get updated depending on changes made by the user in other field, and according to some formula.
example: In the following purchase order form, we have an "Order Details" Repeating Rows column where user adds the ordered products:
 
Each Order Details row includes: the ordered product, quantity (Qty), price and total price (Total).
The requirement: the "Total" field should be automatically calculated as Qty X Price, and displayed as R/O.
To implement this scenario, select the "Calculate Total = Price X Quantity (in Repeating Rows)" sample code.
You will need to update the variables which appear at the beginning of the script according to the column names you have in your list.
In our example, all we have to change is the quantityFieldNamevariable to:

var quantityFieldName = "Qty"


Now click "Save" to save the script and refresh the form. The "Total" field now looks R/O, and displays the calculated value of Qty X Price


Get user profile properties

In this scenario we have a New/Edit form that includes a Person field. When we select a user is that field we want to display some of that user's SharePoint profile properties.
exampleIn the following form, we have the "Employee" field::
The requirement: When selecting an employee, the "Department", "Phone" and "Manager" fields should be automatically updated with that employee's matching SP profile properties. These fields should also appear as R/O.
To implement this scenario, select the  "Get user profile properties" sample code:
You will need to update the variables which appear at the beginning of the script according to the column names you have in your list, and according to the properties you want to retrieve from the SP profile service .
In our example, we need to update these variables as follows:
var userFieldName = "Employee"
var propertiesToGet = ["WorkPhone", "Department", "Manager"]
var fieldsToSet = ["Phone", "Department", "Manager"]


The second script we should add is "Make the target fields appear read-only", which enables setting requested fields to be displayed as read-only fields. After you select that script, you need to update the following variable value to:
var fieldsToDisable = ["Department", "Phone", "Manager"]
 
IMPORTANT: you need to use the internal column names, which might be different than their displayed names.
After you update the variable values in the script, save it and refresh the form. Now everytime you update the Employee field, the Department, Phone and Manager field gets updated with the matching user's SP profile properties, and also appears R/O.


Created at 11/30/2020 5:46 AM by Nimrod Geva (UTC-05:00) Eastern Time (US and Canada)
Last modified at 5/16/2022 8:58 AM by Kiran Gandhi (UTC-05:00) Eastern Time (US and Canada)
Total Views: 1854

Tags

Article Type: User-guide
Recent Discussions
There are no items to show in this view.