ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Web Component control
  • Web Component control overview
  • Creating a Web Component control
  • Entering the different resources of a Web component
  • Using additional resources
  • Characteristics of the Web Component control
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Web Component control overview
The Web Component control allows you to easily include any external Web resource in a WEBDEV site. Several re-usable Web resources are available on Internet: Bootstrap snippets, JQuery.UI components, Angular.JS components, etc.
Specialized sites propose resources (free or paid).
In most cases, external Web resources (Angular JS, Bootstrap Snippets, etc.) come as three components:
  • an HTML code,
  • a CSS code,
  • a JavaScript code.
Dependency files may be provided (images, etc.). A framework must be installed.
The Web Component control is used to manage all these resources.
Creating a Web Component control
To create a Web Component control:
  1. On the "Creation" tab, in the "Integration" group, click "Web component".
    Creating a Web Component control
  2. Click where you want to create the control in the page. The control appears in the editor.
    Remark: The dimensions of the control are optimized to take up the available space at the specified position. If necessary, resize the control using the handles.
To view the characteristics of the control, select "Description" in the context menu.
Tip: If you know the type of resources used, you can add a preset Web Component control: it is directly associated with the external resources of databases. To add a preset Web Component control:
  1. On the "Creation" tab, in the "Integration" group, expand "Web component" and select select the type of Web component to create:
    • JQuery
    • JQuery UI
    • Bootstrap
    • Angular
  2. Click where you want to create the control in the page. The control appears in the editor.

Entering the different resources of a Web component

The different resources (HTML code, CSS code and JS code) can be associated with the Web Component control:
  • in the "General" tab of the control description:
    1. In "HTML - CSS - JS source codes", click "Edit".
      Editing the HTML - CSS - JS code
    2. A window is displayed, allowing you to enter the necessary codes.
    3. Paste the necessary codes for your component.
      Editor of HTML - CSS - JS codes
  • in the code tabs associated with the control:
    1. Select the Web Component control.
    2. Three specific tabs are displayed at the top of the page editor: "HTML", "CSS" and "JavaScript".
      Tabs specific to HTML - CSS - JS codes
    3. In each tab, type the code required by your component. For example:
      HTML code editor

Using additional resources

The Web resource used may required additional frameworks. The "General" tab of the Web Component control description window allows you to:
  • Add external resources by typing the URL of the JavaScript or CSS resource.
    Entering JS or CSS resources
  • Add CSS resources, if necessary.
Characteristics of the Web Component control
The control description window allows you to define the main characteristics of the Web Component control:
  • The "General" tab is used to enter the different codes associated with the control and the external resources used (see previous paragraph).
    Remark: In most cases, if a site provides Web resources, it specifies them.
  • The "UI" tab is used to specify whether the HTML rendering must be displayed in edit mode. If "Display the HTML rendering in edit" is checked:
    • the HTML code is interpreted and displayed.
    • the edit mode may be slowed down.
    • the rendering is calculated without running the JavaScript code and without "media queries".
  • The "Details" tab is used to view the local browser and server procedures linked to the control. You have the ability to add, delete or edit these procedures.
Minimum version required
  • Version 22
Comments
Click [Add] to post a comment

Last update: 05/26/2022

Send a report | Local help