Customizing Your Form Using Public Resources

Overview

The forms created in Form Builder can be customized in terms of their runtime look and feel. To provide an appealing look for your form, you can do the following:

• add images and icons;
• configure Qxthemes;
• use CSS style sheets;
• add JS scripts, etc.

We have a package of resources for form customization, available for downloading to your LVSCE Workspace. To learn how to download and use these resources, read the section below.

Acquiring the Public Resources

To add those resources to your project, you will need the following:

• a Workspace
• a GitLab account

Step 1. Use the key combination CTRL+SHIFT+P to invoke the Command Palette from any view in your VS Code instance. The Command Palette will appear along with the command suggestions at the top of VS Code main window:

Step 2. Type in Git Clone to receive a suggestion for the git clone command:

Step 3. Select the command mentioned above by clicking on it, or navigate towards it using the keyboard and press Enter. As a result, VS Code will prompt you on the link to the repository:

Step 4. In the text field, provide the link to our public resources:

https://gitlab.com/QuerixDemos/public

Step 5. Press Enter. After that, you will be prompted to pick a folder, where the files from that repository will reside:

Pick a path, and press Enter (or click OK).

As a result, there will be a message about the cloning process in the lower-right part of VS Code’s main window:

Next, VS Code will show a dialog about the next actions you can take:

Step 6. Click the Add to Workspace button. After that, the folder named public will be displayed in your Workspace (while residing in the directory opt/Querix/Lycia/progs):

Step 7. For your applications to work with those resources at runtime, indicate the path to public resources in the public.xml file. Here is the example for that file's contents:

For details about how to use the public.xml file, proceed to the following page: public.xml.

Step 8. For the changes to take effect, restart the Jetty web server.

In Linux/UNIX, use the following terminal command for server restart:

sudo service qx-web restart

Also, you can use the following commands to do it in separate steps:

sudo service qx-web stop

sudo service qx-web status

sudo service qx-web start

In Windows, go to your Start Menu, find the Querix folder, and run the Lycia Web Server Manager. For details, proceed to the following page: How to start and stop Lycia Web Server. Alternatively, go to your system’s Services manager, find the Querix Lycia web service, right-click it, and use the context menu to stop and start the service.

Note that you can use any external resources in your forms after adding them to the public folder.

 

Return to top

Using the Public Resources

Using Images and Icons

Step 1. In your Workspace, find the image or icon you want to add from your public folder, right-click it, and select the Copy Path option:

Step 2. Open the form in the Form Builder and select a form item to which you want to add the image. In our example, it is a TabPage:

Step 3. In the Properties view, find the property named Image, and double-click its value cell:

Step 4. In the dialog that will open, find a field named URL, and paste the link there:

Step 5. Edit the link for it to start with /public, and click DONE (or press Enter):

Now, the TabPage we picked for our example has an icon in its header:

 

Return to top

Applying Qxthemes and CSS Style Sheets

To apply a Qxtheme from our public repository, create a .qxtheme file in your 4GL project, and add the following code to it:

Here, {CONTEXT} serves as a placeholder for the server name and a port, which will be added at runtime.

To learn how to use our public CSS styles, read the following instructions: Using a Custom Theme From Lycia Public Resources.

 

Return to top

Using JavaScript Scripts

To use a JS script in your form, use the ui.Interface.frontcall method like in the following example:

 

Return to top