In this tutorial, a Form with Blocks in Treeview will be created using the sample table “customers” and the following additional resources:
- Blocks.
Creating a Form with Blocks in Treeview
Note:If you have any questions on how to create a Form, go to: Creating a new Form
1. Create a new application of type Form, select the “Single Record” option, and then select the “customers” sample table.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/08/image-4.png)
2. Now, if you want a better display of the form, click on the “Edit Fields” tab and change the name of the fields, as shown in the images below.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/08/image-6.png)
Editing form fields with blocks in Treeview
1. First, in the application menu, access the “Layout” tab and select the “Blocks” option.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/08/image-7.png)
2. Once this is done, rename the block already created to “Normal Block” and configure it according to the image below.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/08/image-9-1024x188.png)
3. Still, in the block settings, click on the “Create New Block” button to create a new block.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/08/image-10.png)
4. Now, create a new block called “Open Block”.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/08/image-11.png)
5. Then, create another block called “Closed Block”.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/08/image-12.png)
6. Now, configure the two new blocks as shown in the image below.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-1-1024x244.png)
7. Once this is done, in the application menu, access the “Field Positioning” tab .
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-2.png)
8. Now, move the fields: “cityid” , “cardtype” , “cardnumber” and “notes” to the left box , as shown below.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-3.png)
9. Then, organize the fields in their respective blocks, as shown in the image below.
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-5.png)
10. Finally, select the “Run Application” button on the toolbar to generate the Form.
That done, after following the steps above, the Form will look like this:
![](https://www.scriptcase.net/tutorials/wordpress/wp-content/uploads/2020/09/image-6.png)
To see more examples created using Scriptcase, go to: Examples: Complete Systems and Applications with Scriptcase.
Comment this post