In Studio you can create a screen in two ways - Create an Empty Screen and create a screen using Import from Existing Sheet feature. In this article we will see how to use this feature to build your screen. Very often, in software development cycle, software architects will design the database before designing the UI. Then tweak the database and/or UI as per the requirements to produce a final system. Similarly, in Studio you can first design the Sheets (database) and create a UI based on the Sheets. This makes the UI development faster as compared to creating a screen from scratch. You can also use the same format (Sheets) and create as many apps you need. This minimizes the efforts in creating a new screen altogether if the structure is similar.

Let us see an example where we create an app called Leave Application using the Import from Existing Sheet option.

  • Lets assume we have a sheet already designed and created to capture a user's Leave Request. Let the name of this sheet be "LeaveRequest" containing columns as - employeeid (Text column): to store Employee IDs
    employeeemail (Input Label column) : to store Employee email
    leavestartdate (Date column): to store Start date of leave
    leaveenddate (Date column): to store End date of leave
    leavetype (Dropdown): to store leave type among SL, CL, PL
    leavereason (Text column): to store the reason for leave.
  • Now go to the Studio home page to create a new app and land on the app builder page to see options to create screen. Click on the option Import From Existing Sheet to create a screen based on an existing sheet.
  • When you click on Import From Existing Sheet option, you will be prompted to select the sheet from which the structure needs to be imported. Here, select the sheet named "LeaveRequest" as this was the sheet from which we need to create an app.
  • As soon as you select the sheet, you will see a list of columns from the selected sheet "LeaveRequest" to import the structure and generate the form. 

In this modal, you will see all the column names listed that are present in the sheet "LeaveRequest" along with a icon showing column type (these icons are same icon as of a control). Select the desired column to be imported (turn off the toggle button corresponding to the column if you do not want to import that column) and click on Generate Form button.

  • As soon as you click on Generate Form button, the screen will get populated with the controls corresponding to the columns selected in the previous modal. 

The controls that are created will have Label name auto populated based on the Sheet's column name. As shown in the above image. This will create a screen with controls based on the column type of a sheet. You can modify the control's name and properties as desired.

Did this answer your question?