Web View
This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0
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 |
Was this article helpful?
YesNo