Learn to use Low Code Framework by watching the videos.
You can also visit our YouTube channel to see the latest videos.
Add Textbox to Form.
To add a text box in a form, you have to click on "Add Field". This will open a field property window.
You can also enter various parameters of a textbox into the property window.
Add Date
Inseart a Date field in a form. You can also populate current date by default whenever the form is loaded by simply typing "@Date(now)" in Default Text property.
Multiple Columns
If you wants to design complex form by multiple columns, goto Section properties and enter number of columns you want. This will align fiels in columns you have defined.
Add Section
To make complex form design, you can add multiple sections. This will give you option to design your form as per your requirement.
Make Tabs
You can simply make tabs from sections. Just keep the section group same and rest will be taken care by Kaizen.
Add Page
To create page, click on the "Add New Page" from the menu. A page is made for making an input form, a list, a report or an unauthorized form which will be visible outside your login window.
Populate data in Drop-Down from Database
You can populate data from database into a drop-down. Goto the property window of that dropdown and write the select query in "Dropdown Select Query" box.
Add Radio Button
You can add Radio Button by selecting "Radio" in Field Type. To populate values in radio button, follow the instructions given in the video.
Populate data in Radio Button from Database
You can populate data from database into Radio Buttons. Goto the property window of that dropdown and write the select query in "Dropdown Select Query" box.
Add List in the Form
Kaizen automatically makes List based on the field you have defined in the form. You can however change the columns and other things just by clicking the edit icon. There is also an option to change the SQL View so that you can write more complex query to show more columns.
Display Mode of Page
If you want to open the form by default in the List view, then go to the page properties by clicking on the edit icon next to the page name.
Go to "Display Mode" and select List Mode.
This will set this page to open by default into List mode.
Open ModalPopUp
There will be situations when you want to open a page above an existing page. This can be done by calling that page as ModalPopUp.
Typically it is used to call a master form so that the user doesn't have to leave his current form and lose the data he has entered.
To do this, just go to the properties of the field where you want to call the modalpopup, select the page you wants to open as ModalPopUp and update.
That's it, we are done. You can now see a "+" sign near the field and on clicking of the sign then modalpopup will open.
Add Script - Change Event
You can call JavaScript / jQuery events from any field.
As the example shown in the video, to populate text from one field to another, goto the property window of the first field where you want to call the event.
Click on "Add New" below "Field Script", this will open a modalpopup to allow you to add an event.
You can write the event name and event script here.
The script can be written in jQuery or JavaScript.
Please see the below sample script as mentioned in the video.
$('#Alias').val($('#LedgerName').val());Show Total In ChildGrid Column.
To get a total of a field in ChildGrid, Kaizen gives you a one click solution.
Go to the properties of the field of which you want to see the total and check the "Calculate Total in Grid".
This will show you the total below that field (column) and will keep updating the value as you add, update or remove the record in the Child Grid.
Preview the page
Just one click and you can see how the form you have designed will look or how the script you have written will work to the end user.
Click on the Preview icon and a new tab will be opened on how an end user will see the page.
Edit Object / Field
To edit properties of any object, field, section, child grid, page or list, you just have to click on the pencil icon.
This will open the property window and now you are ready to change any property. On update, the page will get reload and you can see the change.
Add Field in ChildGrid
You can easily add fields in ChildGrid by clicking the "+" sign inside the child grid.
The property window will open and you just have to enter what kind of field you want to add with its properties.
Click on the Save button and you can see your field added in the Child Grid.
Add Time Filed
You can easily add a Time field by clicking in the "Add Field" in the section.
Go to the property window and select "Time" in "Field Type".
To populate current time when the page loads, you can type "@Time[Now]" in the "Default Text" field.
Make Time & Date field readonly & default Cuurent date & time
If you want to make a field in a read only mode, go to the property window of that field.
Click on "Is Read Only".Reload the page and you can see the fields are read only.
Group number in section
To make sections as tabs, you can do it by putting them in the same group.
As shown in the video, go to the property of the section which you want to make it as tab.
Give the "Group Number" the same as the other section with which you want to group this tab.
Kaizen will convert both sections into tabs.
Group number in Field
You can group the fields so that they stick to each other. Simply give the same group number all the fields which you want to stick together and Kaizen will make it happen.
Unique Column in ChildGrid
To make one column accept unique values in ChildGrid, it will just take one click in Kaizen.
As shown in the video, go to the property of the ChildGrid column which you want to make unique.
Click on the "Combine Unique" checkbox and we are done.
Kaizen will automatically make the column to accept unique values.
Tabular Report
Making a Tabular Report is very easy in Kaizen.
All you need is a Stored Procedure which will bring all the data in columns in your report.
As shown in the video, go to the "Add New Page" and select "Report in "Form Type".
In the "Report Query" field, enter the procedure name.
Once you have saved this page.
You can see the report in the menu, go to report and you can now make filtration criteria.
These filtration criteria can be any columns which are there in your report.
On click of "Show Results", the report will be populated with the data from your procedure.
The tabular report automatically applies the option of pagination, sorting, searching and export to pdf, xls, csv and print.
Link ModalPopUp from List
You can open ModalPopUp from a List. There will be situations where you have to give an option to your user to update something after saving the record or want to give a shortcut link for a record to add more data. This can be achieved by giving a link to open a form in ModalPopUp from List.
To do this follow the below steps.
Go to the Edit option of the List where you want to give a link.Click on the "List SQL Query Editor" tab and add the below code after the last column of the select query.
'Address' as [Address]
Once the code is applied, execute the query.
Now you can see the "Address" column in the List tab. Enter the Display Name and other parameters.
That's it.
Your link in the List is ready. You can see a link on each record, and if you click on the link it will open the "Address Master" form in ModalPopUp.
We will have detailed explain about the modelPopupValues and ModalPagePopup function in another video.
getText Function
To populate a textbox from an event you can use the getText function. This function can populate a single record in a textbox.As shown in the video. If you want to populate one textbox on the change of another field, then follow these steps.
Make a stored procedure in the database which will have one input parameter for filtering data. Example given below.
Create PROCEDURE [dbo].[p_GetLedgerEmail]
@LedgerId numeric
AS
BEGIN
select Email as Emailid
from LedgerMaster
where LedgerId=@LedgerId
END
Once you Stored Procedure is ready, you have to add a new script in "Field Script".Create a new event "change" and in script, type the below script and save it.
getText('p_GetLedgerEmail','LedgerId','Emailid','');The above function will populate the Email Address from p_GetLedgerEmail stored procedure in the EmailId field and it will filter the record from the LedgerId.
We will learn about getText other parameters and uses in another video.
getList Function
To populate a dropdown from an event you can use the getList function. This function can populate multiple records in dropdown.As shown in the video. If you want to populate one dropdown on the change of another dropdown, then follow these steps.
Make a stored procedure in the database which will have one input parameter for filtering data. Example given below.
Create PROCEDURE [dbo].[p_GetCityName]
@StateId numeric
AS
BEGIN
select top 99999999 CityId as [Value],CityName
from CityMaster
where StateId=@StateId
order by CityName
END
Once you Stored Procedure is ready, you have to add a new script in "Field Script".Create a new event "change" and in script, type the below script and save it.
getList('p_GetCityName','StateId','CityId','',true);The above function will populate all the Cities from p_GetCityName stored procedure in CityId field and it will filter the cities from the StateId.
We will learn about getList other parameters and uses in another video.
Rate * Qty in child Grid
You can write JavaScript or jQuery to do custom calculation and validation in Kaizen.
The example shown in the video will give you an idea on how you can bring the total into a field in ChildGrid by multiplying 2 fields.
Go to the property window of the field you want to call the event.
Click on the "Add New" button in "Field Script".
The Event window will open and you can mention what event you want to call, here we are calling "change" and writing down the script in the "Event Script" box.
This is the script to populate the total in the "Amount" field on change of "Rate" field.
$('#Amount').val($('#Rate').val()*$('#Qty').val());You can call multiple events from any field.
Populate Multiple TextBox by getText
Hi,
You can populate multiple values in different text boxes from an event by getText.
To do this, as shown in the video, please follow the below steps.
Go to the property window of the textbox on which the event will be called. Click on "Add Script" and create a "change" event.
Paste the below code to populate values into different text boxes.
getText('p_GetCustomerDetail','MobileNo','CustomerName,CreditLimits,Address','');Make sure your query gives an output in the same column name as the field name. Rest Kaizen will handle things automatically.
Populate Multiple DropDown by getList
You can populate multiple values in different dropdown from an event by getList.
To do this, as shown in the video, please follow the below steps.
Go to the property window of the textbox on which the event will be called.
Click on "Add Script" and create a "change" event.
Paste the below code to populate values into different text boxes.
getList('p_GetCustomerAddress','MobileNo','BillingAddress','',true);
getList('p_GetCustomerAddress','MobileNo','DeliveryAddress','',true);Make sure your query gives an output in the same column name as the field name.
Rest Kaizen will handle things automatically.
Run JavaScript / jQuery on Form Load
To do run a custom script before the form loads, you can add the JavaScript OR jQuery code in the "Load Script" box of Page property window.
This code will run when the form will load.
It gives flexibility to developers to write custom validation or call getList or getText funtions, before the form is load.
Run JavaScript / jQuery before Saving Form
To do front end validation before saving the form, you can add the JavaScript and jQuery code in the "Save Script" box of Page property window.
This code will run before the form gets submitted to the database.
It gives flexibility to developers to write custom validation to be checked, before the form gets saved in the database.
PAfterSave >> >>Call procedure After Save, edit. Delete
Hi,
You call a Stored Procedure after the record is saved or edited or deleted from page properties.
Goto the property window of the page you want to call the stored procedure.
Enter the stored procedure name in the "After Add / Update / Delete Query" textbox.
The procedure should have minimum 2 parameters as shown below.
create PROCEDURE [dbo].[p_AferSaveProductMRPUpload]
@RecordId int=1,
@EntryType as int=0 ---0 Add,1 edit.2-delete
AS
Begin
update ProductMaster set OldMRP=ProductMaster.MRP,
OldMRPDate=getdate(),ProductMaster.MRP=MRPUpload.MRP
where MRPUpload.RandNo=@RecordId
end
The RecordId parameter is to identify the record and EntryType parameter is to identify if the record is added / edited or deleted.
getText and getList with Multiple Parameters
To populate values by filtering multiple parameters, there is an option in getText and getList.
See the example shown in the video. On change of Product and Location dropdown its populating current stock.
To do that simply create a "Change" event on Product dropdown in "Field Script" and write the below code.
getText('p_GetProductDetailByGroup','ProductId,SupStateId,kz_companyId,GroupId','UnitId,AutocompleteUnitId,Rate,SGST,CGST,IGST,BatchStatus,PrimaryUnitid,AltrnetConversion,DiscPer','');
getList('p_GetLocationAndStock','ProductId,kz_companyId','LocationId','',true);You can see here that we are passing multiple parameters like ProductId, SupStateId, kz_companyId, GroupId in the store procedure "p_GetProductDetailByGroup" which populates all the text box like "UnitId, AutocompleteUnitId, Rate, SGST, CGST, IGST, BatchStatus, PrimaryUnitid, AltrnetConversion, DiscPer"
Where there is a dropdown to be populated we have used the getList function which populates multiple values in "LocationId".
This way you can apply any number of filtration criteria and can also populate multiple textboxes and dropdowns.
Default Value in AutofillTextBox
You can set a default value in AutoFillTextBox by simply adding the below text in "Default Text" box of that field's property.
When the page loads, it will automatically set the default value in the AutoFillTextBox.
Conditional Readonly True or False
There will be a situation where you may need to enable or disable a field based on some condition.
As shown in the video, if you have to enable or disable any field, first create an event on which the condition will be applied.
Then add the below code.
if ($('#MobileNo').val()>0){
$('#CustomerName').attr('readonly',true);
$('#CreditLimits').attr('readonly',true);
}
else
{
$('#CustomerName').attr('readonly',false);
$('#CreditLimits').attr('readonly',false);
}
This is a simple JavaScript / jQuery code which enables or disables fields based on the condition.
You can write complex conditions based on your requirements.
Data Select Query
In the AutoFillTextBox or the Dropdown where the values are coming from another table, we store the Primary Key for reference.
Now if you edit the record or wants to view the record, you wants to see the column value and not the Primary Key ID which you stored.
To do this, as shown in the video, write a select query in the "Data Select Query" box of that field.
This will populate the values in the edit and view mode.
Single File Upload
To give option to upload a file, click on "Add Field" and select "Upload Single File" in the "Field Type".
Don't forget to mention how much file size you want to allow the user. Write down the size in KB in the "Max Length" field.
Single File Upload and Download
Hi,
We have seen the upload option in this video. Now lets give an option to download the file which was uploaded.
As shown in the video, you have to add this script in the List stored procedure to show a link to download the file.
' + ISNULL(Seller.DataFile, '_') + 'This will give the option to the user to download the file.
Multiple File Upload and Download
To give option to upload multiple files, click on "Add Field" and select "Upload Mutiple Filse" in the "Field Type".
Don't forget to mention how much file size you want to allow the user. Write down the size in KB in the "Max Length" field.
To give download option in the List, please use below function in your View.
[dbo].[kz_GenerateMultipleFileLink]('MultiFile',Seller.MultiFile, SellerId) as MultiFileThe first parameter if the filed name which we created in the form. The second parameter is the column name where the file names are stored and the third parameter is the unique id of the table.
Menu Navigation Position
You can easily switch between navigation menus.
The option is given in the User Master. Change the "Menu Navigation Position" and you can see the change in the menu.
Inactive page from menu
You can activate or deactivate any page by changing the "Is Inactive" property.
The page will be visible in Developer mode but won't be visible for user.
Detail Change Script
Now you can run JavaScript / jQuery script when any record in Child Grid is added / updated / deleted.
To do this, go to the properties of Child Grid. You will see a textbox which says "Detail Change Script".
The script you will write in this box will run whenever a record is added / updated / deleted.
Below is the script which populates the total of a column from child grid to textbox in another section.
$('#BasicTotal').val($('#PageChild_13_RateAftDisc_Total').val());
$('#CGSTTotal').val($('#PageChild_13_CGSTAmt_Total').val());
$('#SGSTTotal').val($('#PageChild_13_SGSTAmt_Total').val());
$('#IGSTTotal').val($('#PageChild_13_IGSTAmt_Total').val());
$('#RoundOff').val(($('#PageChild_13_Amount_Total').val()-Math.round($('#PageChild_13_Amount_Total').val())).toFixed(2));
$('#FinalTotal').val(Math.round($('#PageChild_13_Amount_Total').val()));
The "PageChild_13" is the unique id of the child grid.
Developer and Client Remarks
You can set additional help text for users for each field. This text will be visible when the user hovers the mouse icon on the "i" icon next to the field name.
To do this, go to the field property window and write the remarks to "Client Remarks".
Same thing you can do for other developers. In case you want to store some remarks only for developers, then you can write it in the "Developer Remarks" textbox.
Save Button Label
You can easily change the label of the "Save" button.
Go to page properties and enter the text in the "Save Button Label" you want to give to show in the Save button.
Add Additional Class
Kaizen is very flexible in functionality and also in GUI.
There can be a situation where you want to treat a field differently.
To do this, you can give an additional class to each field. This class can then be called from CSS or jQuery.
In the video you can see how you can change the background color of a field by giving it an additional class and define the style in the css file.
The "Add Additional Class" text box is available in the field property window.
Call External URL
You can open any external URL from the menu by entering the url in page property.
To do this, go to page property. Enter the url you want to call in the "External URL" text box and save it.
When the user will click on the menu, it will automatically take him to that external url mentioned.
Dropdown Show Select Option
You can now give the "Select" option in Dropdown. There can be a scenario where you want the user to choose an option from the dropdown but when your form is loaded, it should not have any default value selected.
To do this, go to the properties of the drop down. Check the "Dropdown Show Selected" box.
But for this, you also have to make the field mandatory.
ImpoortExcelCSV
To import data from an excel file, you can use the field type "ImportExcelCSV".
You also have to define the fields and table name in XML format to specify which columns should be saved in which table.
As shown in the video, you have to create an XML format (see the below format) and paste it on "Dropdown Values".
PriceListTemp
.csv
1
1
ProductCode
1
ProductName
1
Discount
2
GroupId
That's it, now you import data from excel or csv files into a table.
Populate HTML Grid from DropDown
You can populate data from the database to HTML grid.
As shown in the video. To populate data into a HTML grid on change of a dropdown.
Please follow the below process.
Create a HTMLRow field in the form. This is where the data will be populated.
Now go to the properties of the dropdown and create a change event.
Enter the below text in the event script.
getHtml('p_PopulateOrderDetail', 'SalesOrderId', 'Info', '');This function is used to populate data into a HTML grid / table.
The first parameter is the source of data.
The Second parameter is for filtration criteria.
Third parameter is to point where the data will be populated to the HTMLRow field.
Based on the data from the source, the HTML table will be populated.
getList Function Full Explanation
The getList function helps you to populate multiple values in dropdown.
As shown in the video. You can apply multiple parameters to filter the data, but can only populate values in a single dropdown field.
getList(storedProcedureName, parametersElements, toElement, runScript, AddSelect)The above getList function has these parameters.
storedProcedureName = write the Stored Procedure which you want to call.
parametersElements = mention the parameters by which you want to pass to stored procedure for filtering the data. You can write multiple parameters by separating them by "," comma. You can mention the field name as parameters and the value of that field will be passed to the function.
toElements = here you can write the drop down field name where the output should be populated. The field name mentioned in the function should match the output column name in the stored procedure.
runScript = here you can call an additional function once this getList function runs successfully.
AddSelect = this option is to have a "select" option in the dropdown. If you write "true", then it will show the "select" option in the dropdown. False will not show "select" option.
getText Function Full Explanation
The getText function helps you to populate a single value.
As shown in the video. You can apply multiple parameters to filter the data and can also populate values in multiple fields.
getText(storedProcedureName, parametersElements, toElements, runScript)The above getText function has these parameters.
storedProcedureName = write the Stored Procedure which you want to call.
parametersElements = mention the parameters by which you want to pass to stored procedure by which the data will be filtered. You can write multiple parameters by separating them by "," comma. You can mention the field name as parameters and the value of that field will be passed to the function.
toElements = here you can write where the output should be populated. It can be a TextBox, Hidden Field, Numeric field etc. You can also write multiple field names in case you want to populate values in them. The field name mentioned in the function should match the output column name in the stored procedure.
runScript = here you can call an additional function once this getText function runs successfully.
Give Clone / Copy option in ChildGrid.
To give an option to clone or copy the child grid row, there is an easy option in Kaizen.
Goto the property window of the child grid. Check the "Allow Clone" option.
This will make the clone button visible in each row near edit and delete.
By clicking on the clone button, the user can automatically add the same row again.