Embedding local / external JavaScript & CSS files

You can use the “Script parts” function to integrate JavaScript & CSS code directly into your application. This allows, for example, the integration of third-party plugins, such as QR codes or barcode scanners, or direct control of a component.

In this article you will read the following content:

Importing locally available (JavaScript/CSS) files

Integrate external JavaScript or CSS files

Create JavaScript code directly and control GAPTEQ components

Execute script part

Enhance page with style elements (CSS code)

1. Importing locally available (JavaScript/CSS) files

• To import locally available (JavaScript) files, go to the “Script parts”, which you can find in your GAPTEQ page under the menu item “Page definition”.
• First create a folder in the design objects and import your local CSS or JavaScript file by clicking on “Import” (at the top of the menu bar).

• You can then click on “Add internal file” to select this imported file and use it as an include for the page.

2. Integrate external JavaScript or CSS files 

In addition to importing locally available JavaScript and CSS files, you can also integrate external plugins from third-party providers into GAPTEQ. These could be barcode or QR code scanners, for example. 

• Under the “Add external include” button, you can enter the URL to an external JavaScript file.
• With “Move up” and “Move down” you can define the order in which the scripts are integrated into the source code.

3. Create JavaScript code directly and control GAPTEQ components

• Under “Add script part” you can first assign a name (highlighted in green in the example below) and then create your script part with all instructions.

4. Execute script part 

The GAPTEQ Action Scripts can execute a script you have created when triggered by an event. All script parts of the page are listed here for selection.

5. Enhance page with style elements (CSS code)

You can use CSS code to influence the appearance of your HTML components.

• CSS embedded in page: CSS code that you enter here is embedded in the HTML code.
• Add internal file: Select a CSS file that you have already imported or created.
• Add external include: External CSS files can be included by specifying the URL to the file.
• Use “Move up / Move down” to specify the order in which the files are included in the HTML code.