Webview

The Webview component allows you to embed web content directly into your application, allowing you to display web pages, documents, or other online resources within the app interface.

Key Features:

• Web Content Integration: Load and display external web pages or online resources inside the application.
• Customization Options: Control aspects like zoom, scroll bars, and whether users can interact with the web content.
• Security Controls: Provides options to restrict access to certain URLs or limit interactions with external sites.
• Cross-Platform Compatibility: Ensures seamless viewing of web content across various devices and platforms.

Common Use Cases:

• Documentation: Embed online documentation or help resources directly into your app for easy reference.
• Multimedia Integration: Display videos, maps, or other interactive content hosted on external sites.
• Data Visualization: Present real-time data from external sources like dashboards or analytics platforms.

Creating Webview

1. Under Inventory (), click “Component“, which is on the second left panel.

2. Click Create placed on the second horizonal panel from the top, and a dialog box “Create Component” pops up.

3. Select Type as “Webview“, Name it in the text box, and click “Create“.

4. When you click Create (), Basic option of Config menu for the Webview opens.
5. Now you will see the following menu options:
   • Basic
   • Properties
   • Style
   • Animation
   • Events
   • Data

Note: You can create this component in the layout option of the configurator section as well. After this, you can follow the process given below.

Basic

Basic Properties	Description
Type	The Component Type indicates the type of component you are adding. In this case, it defaults to “Webview” and cannot be changed here. This selection is made initially when you create the component.
Reference Name	The Reference Name is a unique identifier assigned to the component for internal use. This name is visible only to vFlow users, and is not displayed to end-users. The Reference Name is intended for your convenience, helping you easily identify and manage the component throughout.
Description	The Description field is intended for use by application designers or administrators (vFlow users) to provide additional context or details about the component. This description is not visible to end-users and is used solely for internal reference to assist with component management.

Properties

Properties	Description
Copy
Domain Name For Copy In Cross Domain
Header	It is displayed on the top of the component. To know more about header, click here or see the Header section under the System Components.
Footer	It is displayed on the bottom of the component. To know more about footer, click here or see the Footer section under the System Components.

Style

The Style option allows you to personalize the appearance of the Webview. This includes adjusting various visual aspects to ensure it complements your application’s branding and overall design. Here’s a breakdown of different settings that you can make adjustments to:

• Large Screen Width: The component width is adjustable by entering a percentage value in the text box. For example, if the width is set to 100%, Webview will take the full width of the screen.
• Transparent: When you click to select this checkbox, the component will have a transparent background, allowing it to blend into the background of the page or layout.
• Background Color: To choose the background color for the Webview, you can use a color picker or enter a hexadecimal or RGB color code. The default opacity is set to 100%.

• Dimension:
  • Height: You can define the height of the Webview in pixels (px) or percentage (%).
  • Maximum Height: You can set the maximum height to prevent the Webview from exceeding this limit.
  • Width: You can specify the width of the Webview in pixels (px) or percentage (%).
  • Maximum Width: You can define the maximum width to prevent the Webview from expanding beyond this size.
• Spacing:
  • Margin: To adjust the space around the Webview, enter values for top, right, bottom, and left margins in pixels (px). The default is 0px for all sides.
  • Padding: To set the internal space within the Webview, enter values for top, right, bottom, and left padding in pixels (px). The default is 0px for all sides.
  • Border Radius: To define the curvature of the corners of the Webview, enter values for top-left, top-right, bottom-right, and bottom-left in pixels (px). The default is 0px for all corners.
• Custom CSS Class Name
  • Users can enter custom CSS class names in the provided input field to apply additional styles.
  • Multiple Classes Names can be provided, If needed. They can be applied by separating them with commas, as indicated by the example (classA, classB).

These settings allow you to tailor the Webview to your specific design preferences and requirements.

Animation

This option allows you to apply several animations to enhance the component’s loading appeal. The following are the available animations:

1. Bounce
2. Flash
3. Pulse
4. Rubber Band
5. Handshake

Their Configuration:

1. Click the Type list, and then select an animation to apply an effect when the component loads.
2. After you select one of the animations (for example, Bounce), you will see the following configuration options:
   • Speed: In this field, you can select one of the following options to adjust the speed of the animation:
     • Faster
     • Fast
     • Slower
     • Slow
   • Delay: Click this list to select a value (for example, 3 seconds). This value specifies a time period. The application will load the animation after this time period (for example, 3 seconds).
   • Repeat: In this list, select a value (for example, 2). This value specifies the total number of times the application will play the animation.
     
3. After you configure the component’s animation properties, click to apply them to the component.

Events

The Events option of the Webview component, as shown in the image, allows you to assign task groups that will execute when specific actions occur within the Webview component. These tasks can be created separately in the configurator or inventory and can be grouped to perform various actions when certain events are triggered.

Here’s a breakdown of the Events section:

1. On Load:
   • This option lets you assign a task group that will execute automatically when the Webview component is loaded.
   • This could be useful for initializing data or triggering other actions as soon as the Webview is displayed.
2. Custom Load:
   • The Custom Load event enables you to trigger a specific task group during a customized loading scenario.
   • Similar to the previous options, you can choose the task group to be executed from the Select Task Group dropdown list or go back to the inventory or configurator to make a task or task group if needed.

After assigning the appropriate task groups to these events, click the button to apply your configuration to the Webview component.

In summary, the Events section provides flexibility in automating actions within your Webview component by linking predefined tasks to occur during the Webview’s loading process. This customization ensures a more dynamic and interactive user experience, tailored to your application’s specific needs.

Data

The Data section of the Webview component allows you to define how data is fetched and displayed within the webview. Here’s a breakdown of the key fields:

1. Data Type (NONE / WEBVIEW URL):
   This dropdown allows you to select the type of data the Webview will use. In this case, it can be set to “WEBVIEW URL,” meaning that the Webview will display content from a specified URL.
2. Type:
   This field lets you define how the data should be fetched, such as GET or POST request types. The selection here depends on how you want to retrieve or interact with the data on the specified URL.
3. URL:
   The URL field is where you enter the web address or endpoint that the Webview will load. This is the source of the data or content to be displayed within the component.
4. Request (Key-Value pairs):
   If the selected data retrieval method (e.g., POST) requires sending additional data, you can define key-value pairs in this section. The Request (Key-Value pairs) section allows you to send extra information along with the request to the URL. Here’s a simple breakdown:
   • Key: This is like a label or name for the information you’re sending (e.g., “username”).
   • Value: This is the actual data for that label (e.g., “JohnDoe”).
     • For example, if you’re sending a request to a website to get user-specific data, you might send something like:
       • Key: “userID”
       • Value: “12345”
   • This extra information helps the website understand exactly what data you want. You can add more key-value pairs if needed by clicking the + Add button.

After filling out these fields, you can hit Save to apply the configuration.

This structure allows you to control the content dynamically displayed in the Webview based on the defined data source and request parameters.