How to reference JavaScript in low-code platforms?

The open source China community team made its first live broadcast, telling the story behind the open source China community in the name of sharing."

introduction

In today's rapidly developing digital era, enterprises' needs for business applications are increasingly complex and diverse. As an innovative solution, the low-code development platform breaks down traditional programming barriers with an intuitive and easy-to-use design concept, allowing non-technical personnel to easily build fully functional web applications without in-depth coding. This feature greatly simplifies the application development process, accelerates the transformation of business needs into practical applications, and brings unprecedented efficiency improvements and business flexibility to enterprises.

However, the actual business environment is full of diversity and uniqueness. Faced with certain specific and challenging business scenarios, conventional functional modules may not be able to meet all customization needs. Therefore, the low-code development platform provides an open and powerful programming interface, allowing both senior developers and business personnel with a certain programming foundation to carry out in-depth customized development based on the original functions to achieve more complex and more Function expansion that fits business characteristics.

Today, the editor will take Grape City Company's enterprise-level low-code development platform - Movable Type Grid as an example to introduce how to reference CSS and JavaScript in the low-code platform.

Environmental preparation

Movable type low code installation package

Introduce CSS

CSS (Cascading Style Sheets) is a style sheet language mainly used to define and control the layout, visual presentation and formatting of web content (such as HTML elements). The role of CSS is to separate web page content from presentation, allowing developers to independently design and change the presentation style of the document, including but not limited to fonts, colors, spacing, layout, size, animation effects, etc.

The picture above is in the movable type grid, where you can upload customized CSS files. The movable type grid supports network link files, local files, and supports editing CSS files.

Introducing JavaScript

Movable Type Grid provides three places to set JavaScript code, as shown in the following table:

code type	Set location	Action area	Example
JavaScript	File->Settings->Custom JavaScript/CSS	entire application	Develop some tools and methods to be used by multiple pages.
JavaScript	page settings	The current page	Do some initial UI logic when the page loads.
JavaScript	Order	current command	For example, a warning box pops up when a command is clicked.

Register application-level JavaScript files

There are many JavaScript files that are shared by multiple pages or even all pages of the entire application. In order to use JavaScript files in your entire application, we can upload the entire application in the settings page of the movable type designer. Program-level JavaScript files. Supports uploading local JavaScript files, and can also directly load JavaScript files on the network through URL address links.

Add web link
Specify the JavaScript address link on the Internet and click "Save". The JavaScript file will be displayed in the form of a URL.
For example, we can use Baidu Map’s JavaScript API:

Add local file
Local JavaScript files can be added, and uploaded JavaScript files can also be edited.

Let's take a simple example, add a JavaScript file, and write a simple addition method in the file.

Next, we can call the add method here on the page.

The general logic of the content displayed on the above page is that commands are given to three cells, namely x, y, and plus. After we enter numerical values in the x and y cells, click the button to execute the JavaScript command to call our add method. The corresponding sum can be calculated.

The specific code is as follows:

var x = Forguncy.Page.getCell("x").getValue();
x = parseInt(x, 10);
var y = Forguncy.Page.getCell("y").getValue();
y = parseInt(y, 10);
var plus = add(x,y);
Forguncy.Page.getCell("plus").setValue(plus);

Register the JavaScript file of the specified page

In addition to setting JavaScript files globally in the application, we can also set page-level JavaScript files for a certain page to handle the special logic of the current page.

illustrate:

If the file contains Chinese characters, please confirm that the file uses Unicode encoding.
Movable Type Grid has a built-in JQuery3.6.0 library (Movable Type Grid V10.0 version), and you can use JQuery functions directly in scripts.

Open the page in the Movable Type Designer, and then in the toolbar on the right side of the page, you can select the "Page Settings" tab in the property settings area, click "JavaScript File" to upload the JavaScript file. After the upload is completed, you can edit the JavaScript file. Perform delete or edit operations.

//点击单元格之后弹出“点击按钮弹出窗口！”
Forguncy.Page.getCell("button").bind("click", () => {
    alert("点击按钮弹出窗口！")
});

Above we uploaded a simple JavaScript file. When we click the button on the page, a warning pop-up will be triggered. The effect is as follows:

Custom JavaScript for specified elements

Earlier, the editor introduced to you the registration of application-level JavaScript files and the registration of JavaScript files for specified pages. In addition, the movable type grid can also customize JavaScript for specified elements, such as setting JavaScript commands for cells.

//点击单元格之后弹出“复制成功”
Forguncy.Page.getCell("duplicate")
    .setValue(Forguncy.Page.getCell("value").getValue());
alert("复制成功！");

The implementation effect is as follows:

Introducing JavaScript API

Through the above demonstration, you can see that in the movable type grid, you can operate pages and cells through JavaScript. In addition, you can also operate tables on the page. Next, we will use an example to demonstrate how to operate the table.

First create a new data table, then bind the data table to the page, and set column names for the columns of the table. Finally, set a JavaScript command for the [Add Record] button to add a row of new data to the data table.

//获取当前页面
var page = Forguncy.Page;
//获取页面上的表格
var listview = page.getListView("表格1");
//添加新行
listview.addNewRow(
    {
        "name": "Jack",
        "sex": "male",
        "age": "17"
    }
);

As you can see, when we trigger the button command, we can add a new row of data to the table through the JavaScript command just now.

Through the above examples, you can see that the movable type grid provides a very rich JavaScript interface API, which can perform various operations on the movable type grid pages, cells, tables, etc. If you want to have a deeper understanding of these interface APIs , you can refer to the JavaScript interface documentation of Movable Type Grid .

Debugging JavaScript and CSS code

Like pure code debugging, after applying JavaScript or CSS code to the page, you can also debug the code in the browser. The following editor uses the latest version of the Mircorsoft Edge browser as an example to introduce how to debug JavaScript and CSS code.

Steps

1. Designer run: run the application in the designer;

2. Press F12 in the browser to open the developer tools and select "Sources";

You can see that the JavaScript and CSS code we added are under GeneratedResources, as shown by the marks in the picture above.

in:

JavaScript in a command refers to the code in the JavaScript command.
JavaScript in the application refers to the JavaScript file in "Settings->Custom JavaScript/CSS Code".
The CSS in the application refers to the CSS file in "Settings->Custom JavaScript/CSS Code".
JavaScript in page settings refers to the JavaScript files uploaded in page settings.

3. After finding the corresponding code, add a breakpoint to the code in the browser console to run and debug it.

Finally, attach the complete file project link using movable type grid: https://gitee.com/GrapeCity/reference_-java-script_in_lowcode

Summarize

The above is the whole process of how to reference JavaScript in a low-code platform. If you want to know more information, please click here to view it.

Extension link:

From form-driven to model-driven, interpret the development trend of low-code development platforms

What is a low-code development platform?

Branch-based version management helps low-code move from project delivery to customized product development

How to reference JavaScript in low-code platforms?

Guess you like