Page

In the vDesigner module, a page is a basic building block. You can use a page to create an application page. In the vDesigner module, a page is treated as a component. You can add a page as a page or popup page.

At the component-level, you can configure different properties in a page under the following categories:

• UI Configuration
• Data Configuration
• Security Configuration
• Event Configuration

These properties are described as follows:

UI Configuration

Tab	Property Name	Description	Mandatory	New Default Values	Visibility Rules
Basic	Scroll	When you click this check box, the page displays the scroll bar. The user can move the scroll bar to see the content of the page.	No	Clear Check box
Basic	Rotate	When you click this check box, the screen or related page will automatically switch to landscape mode after the user turns his or her device sideways.	No	Clear Check box
Basic	Allow Screenshot	When you click this check box, the application allows you to take a screen capture of the related page.	No	Clear Check box
Basic	Custom Width (Web)	Allows you to the change the width of the application page.	No	Selected Check box
Basic	Switch to Popup Page	When you click Switch to Popup Page, the page is converted into a popup page. In the application, you can use the popup page to display it over the main page as a popup screen or dialog box.	No
Basic	Custom Width (Web)	In this box, enter a value greater than 375 pixels to change the default width of the application page.	No		When Custom Width check box = “Selected”
UI Properties-Style	Styles	Allows you to select a specific style for the page from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.	No	Default
UI Properties-Background	Page Background	Allows you to define page’s background by providing the following options: 1. Color 2. Image 3. Gradient	Yes	Color
UI Properties-Background	Color	Click the left box to define the background color of the page.	Yes	#FFFFFF	When Page Background = Color
UI Properties-Background	Image Source	This box comes into view after you select Image in the Page Background list. To configure an image as the element’s background, you can use one of the following options: –> None –> URL –> Asset Library	Yes		When Page Background = Image
UI Properties-Background	Image URL	This box comes into view after you select URL in the Image Source list. In the Image URL box, enter the URL of an image. The application fetches the image from the URL-based location and then displays it as the page’s background.	Yes		When Image Source = URL
UI Properties-Background	Fit Type	Provides the following options to resize the image in the container: 1. Cover:- The image keeps its aspect ratio and fills the available dimensions. The image is clipped to fit in the container. 2. Fill:- With this option, the image is resized to fill the given dimensions. If required, the image is stretched or reduced to fit in the container. 3. Contain:- The image keeps its aspect ratio but is resized to fit in the container.	No	Cover	When Page Background = Image
UI Properties-Background	Axis	Allows you to configure the orientation of the gradient color as follows: 1. Vertical 2. Horizontal In a color scheme, a color gradient specifies a range of position-dependent colors. These colors are used to fill a region.	Yes	Vertical	When Page Background = Gradient
UI Properties-Background	Color1	Allows you to define the first color in the color gradient scheme. Click the left box to select the first color.	Yes	#FFFFFF	When Page Background = Gradient
UI Properties-Background	Color2	Allows you to define the second color in the color gradient scheme. Click the left box to select the second color.	Yes	#FFFFFF	When Page Background = Gradient
UI Properties-Alignment and Spacing	Padding	This property allows you to define padding around each side of the page. It provides four different boxes to define the padding around the right, left, top, and bottom side of the page. The padding specifies the space in pixels around each side of the page inside the page border.
UI Properties-Alignment and Spacing	Container Internal Alignment	Allows you to define the alignment of different elements that you drag to a page. You can define the alignment of elements across horizontal and vertical axes of the page. Click the first list to select the alignment across the horizontal axis as follows: 1. Left 2. Center 3. Right Click the second list to select the alignment across the vertical axis as follows: 1. Top 2. Middle 3. Bottom 4. Space Around 5. Space Between 6. Space Evenly

Data Configuration

Tab	Property Name	Description	Mandatory	New Default Values	Visibility Rules
Data Configuration-Input	Entity Path	This property allows you to map an entity to a page. To map an entity: 1. Click in the Entity Path box, and a smart selector expands. 2. The smart selector displays the list of different entities, functions, and elements. 3. In the list, select an entity for the following purposes: a. To fetch the data from the entity and then display it on the page. b. To get the data from page and then store it in the entity.	No	{{ fx }}

Security Configuration

Tab	Property Name	Description	Mandatory	New Default Values	Visibility Rules
Security Configuration-Basic	Private Page	When you click this check box, the related page becomes a private page. The user can access the private page after authentication.	No	Clear Check box

Event Configuration

On the page, you can configure the following events:

• onPageResume
• onPageCreate
• onBackPress
• onPageDestroy
• onPageBackground