Customize the iView Layout 

Visual Composer provides many options for customizing the visual aspects of your iView. In this example, we will modify a text string that appears in the input form, and remove one column from the table view. For detailed information about layout customization options, see Defining iView Display Properties.

 

Procedure

...

       1.      Choose Model ® Design the Views (or click the Designer button in the task panel toolbar). The Design the Views tools appear in the task panel.

       2.      In the workspace, click the Layout tab.

       3.      Click the Bank Ctry field that appears in the Input Form.

       4.      On the Controls tab in the Designer task panel, find the Label field below the bottom of the Available Styles list, enter the text  Bank Country, and on your keyboard, press Enter. In the Layout workspace, the field label is updated.

       5.      Having lengthened the label text, you need to adjust the layout to accommodate the longer label. From the Available Styles list, select Long Label. Do the same for the Max_Rows field.

       6.      In the form itself, select and move the fields, and adjust the Submit button accordingly.

To move the three elements at once, click the Bank Country field and then press Ctrlwhen selecting the Max Rows field and the Submit button. Once all items are selected, you can move them together.

       7.      Click in the title bar of Bank List Table to select it.

       8.      On the Controls tab in the Designer task panel, deselect the Bank_Key checkbox to remove the Bank Key  column from the Bank List table, as shown in the following figure.

You can zoom in and out of the components displayed in the Layout workspace by clicking the Zoom In and Zoom Out buttons in the Layout toolbox beneath the workspace. You can also change the layout of the iView using the other buttons of the Layout toolbox. See Customizing the View Layout and Behavior.