Web View

The Web View element allows the end user to open a web page instantly from an app only by tapping the link. It is a quick web view that provides the limited browsing functionalities as a sub-process of the app.

Usage

When to Use

Use the web view to: –> Display rich content instantly. –> Display general and public content that does not pose security risk. –> Display information without requirement of web browser. –> Display information that is independent of the application version (For example:- IOS, Android, etc)

Web View Configuration

The “Web View” element has the following properties:

• UI Cnfiguration
• Data Configuration

UI and Data Configuration

For the “Web View” element, you can configure the following properties:

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rule
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	WebView_ XXXX
Basic	URL	In this box, enter the URL of the web view. The application will access this URL to open the related application page in the web view element. You can also define query parameters with the URL string.	No	{{ fx }}
Basic	Callback	In this box, enter the callback function. It enables the interaction to fetch the data from the external application.	No
Basic	Success URL	In this box, enter a URL string. The app displays the content related to this URL after a specific task performs the related function successfully in the web view.	No	{{ fx }}
Basic	Failure URL	In this box, enter a URL string. The app displays the content related to this URL after a specific task fails to perform the related function in the web view.	No	{{ fx }}
Basic	Output Location	In this box, select an entity or element. The selected entity/element serves as a storage location. The callback function fetches the data from the external application and then stores it in the configured output location.	No	{{ fx }}
Basic	Query Parameter	This feature remains active if you do not add query parameters in the URL box. When you append query parameters to the URL in the URL box, this feature becomes inactive. It allows you to define the query parameters in the form of a key-value pair. To define the query parameter: a. Click Add, and a Query Parameter dialog box opens. b. In the Query Parameter dialog box, in the Key box, enter a key (for example:- Name). c. In the Value box, enter the key’s value (for example:- abc). d. To define other query parameters, click Add More, and then perform steps b and c.	No
Basic	Button Bar	Click this check box to make a button bar available in the app browser. The button bar allows you to go to the previous or next page in the web view.	No	Clear Check box
Basic	Visible	If you click to select this check box, the Web View element becomes visible on the screen.	No	Selected
Basic	Enable	If you click to select this check box, the button group element becomes active on the screen. You can perform the function on the active element.	No	Selected
UI Properties	Styles	Allows you to select a specific style for the element 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	Margin	Allows you to define a margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom borders of the element.	No	4
UI Properties	Element’s Alignment	Allows you to align the content in the web view by providing the following options: –> Left –> Center –> Right	No	Left
UI Properties- Shape and Decoration	Type	Under the Shape and Decoration section, this property has the two following options: Autofill:- If you select this option, you cannot change the element’s dimensions. When you drag the element to the canvas, this option is selected by default. If you select Auto Fill, vDesigner places the element with the default dimensions. Manual:- If you select this option, you can change the dimensions of the element.	No	Autofill
UI Properties- Shape and Decoration	Width Value	In this box, enter the width of the element in the pixels unit or percentage unit.	No
UI Properties- Shape and Decoration	Height Value	In this box, enter the height of the element in the pixel unit.	No	300
UI Properties- Shape and Decoration	X	Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.	No	Current X axis co-ordinates (Inactive State)
UI Properties- Shape and Decoration	Y	Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.	No	Current Y axis co-ordinates (Inactive state)

Data Configuration

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rule
Data Properties	JS Disabled	If you click to select this check box, the java script feature becomes unavailable in the Web View element. By default, you see this check box selected, which makes the web view secure. Also, turning this feature inactive blocks malicious code that can barge into the user’s privacy and track cookies.	No	Selected