BrApps enterprise low code development platform is based on the drag-and-drop development mode, providing rich service components to meet the design, construction, integration, deployment and management of enterprise digital applications, enabling teams to help them build digital applications in all scenarios.

This article will use an application creation example to introduce the specific process of developing applications using BrApps. It will demonstrate how to create a simple product management system.

The main process includes the following steps:

  • Creating an Application Service

  • Create an

    1. Create a business object

    2. Create an option set

    3. Create an application page

    4. Create an application menu

  • Release application

The main business functions of the system include: product management, classification management, sub-classification management and label management. The logical diagram of the whole system is shown in Figure 1.

All detailed operations can be viewed on wechat/official website.

Create an application service

Before starting the application design, you need to create a low-code application service and the corresponding project.

  • On the top right of the organization level project list page, click the “Create Low-code Service” button (service code recommendations are relevant to the organization and avoid duplication with other services).
  • After filling in the application service information, click Create New Project to create the corresponding project.
* Note: new projects must be created in the first trial of low code development function. The default project “Company domestic sales Platform” cannot be used in the system.




Create an

The application contains the basic page and page content (business objects and option sets). Before designing the page, it needs to supplement the data content required by the page first, then add components to form the page framework, and create UIflow to improve the logic.

01 Create a service object

Step 1: Create a single business object

  • On the Business Object page, click the Create Business Object button
  • Create five business objects named Product, Category, subcategory, Label, and Product Label



Step 2: Add business object properties

Click the + button next to a service object to add properties and set the properties, including Storage, Mandatory, searchable, and component. The following uses the label of a service object as an example.

  • Click the plus sign below the business object label to add attributes and type the following in sequence:

    • Name: Name

    • Code: NAME

    • Component select Text with a maximum length of 60, and select a single line of text

  • Click the Create button



* Add attributes of product, category, subcategory, label, and product label in sequence. See Figure 1 for the specific attributes to be added.


Step 3 Create a list of associated values

Click the edit button on the “label” of the business object to enter the detailed setting interface of the business object

  • Click the “Create List of Associated Values” button above the list of associated values to create a list of associated values named “Select category”

  • Click the name to enter the associated value list editing interface. In the page design, drag the two fields “Name” and “Creation time” into the list from the left “Field” toolbar. In Associated Value List Properties, select Searchable > Advanced Search. Drag the Name field in the Advanced search Default field



* See the video for details on creating lists of associated values for other business objects.

02 Create an option set

The first step is to create an option set

  • On the option set page, click the Create Option Set button

  • Create product options set, add options “domestic” and “foreign”

The second step associates the set of options with the business object

  • Go to the business object page, select Business object “Product” and click Add property “Place of Origin”

  • Property Component set to Radio, option set to Product

03 Creating an application page

Note This text only shows how to create the Tag page. For details about how to create other pages, see the video.

The first step is to create the page

Enter the page interface from the menu bar, click “Create page” button, and enter the following information in sequence:

  • Name: Label management

  • Number: tag_manage

  • Title: Label management

The second step is to add sections

When creating a page, a default section will be created. Click “Default Section” in the navigation bar to enter the page design interface of this section. (Or click the “+” button after the page name management TAB in the navigation bar on the right of the page and select “Add Section”)

Step 3 Add the data source

Click the “Data Source” at the top of the page to switch to the default section data source interface, click the “+” button and select add Data source “label”.

Step 4 Add page components

Switch to the default Section page design interface

  • Drag the “List” component from the component list in the left workbar and add a data source label to the component. A new “Table Component” will be created under “Default Section” in the navigation bar.

Step 5 Edit the component view

Click Table Components under Default Section in the navigation to edit the component view

  • On the toolbar on the right, set the view properties of the component, respectively

    • Searchable > Advanced searchable

    • editable

    • Feasible internal editing

  • To edit a field in the component, drag the field directly from the field list on the right toolbar:

    • In the default field under Search (Advanced Search), drag the field name (Update person)

    • In the list field, drag name (update person), Creation Time (creator)

    • Select add, Delete, Save, and Query buttons in the list

    • Quickly create a delete button in a list of inline buttons

Step 6 Add UIflow

1. Click + next to the management page name on the navigation bar on the right, choose Add UIflow, and enter the following information:

  • Name: Create a new label

  • Code: create_new_tag

2. Tap the UIflow name to enter the flow design interface

  • From the process component on the left, drag the “Add” component directly to the flow line, click the component, and set the properties in the toolbar

    • Target attribute: name-name

    • The fixed value is test123

    • The data source is tag

    • Add an initial value:

    • The description is: Create a label

    • The return value (output variable name) is: tag

  • Drag the Submit component from the process component on the left to the flow line (behind the new component) and set the properties on the right toolbar

    • The data source is tag

    • The description is: Submit the new label

  • Drag the Search component from the process component on the left to the process line (behind the submission component) and set the properties on the right toolbar

    • The data source is tag

    • Query data again

Step 7 Page flow associated button

Set the corresponding page flow for the button

  • Go to the table component design page and click the Add Custom List button

    • Button text: page flow create label

    • Select button icon

    • Set the logical type to “UIflow” and select “Create new Label” to associate the UIflow created under the page.

    • Pop up confirm “Yes”

    • Prompt input: Are you sure to create a new label

    • Confirm button text: OK

    • The text of the cancel button is cancel

04 Creating an Application menu

Enter the menu management interface from the menu bar and click the “+” button to create an application menu named Product Management

  • Click “+” button after product Management to create menu bar “Product”
  • Click the “+” button next to “Product” to create a first-level menu navigation, including “Product”, “category” and “label”.
  • Click the navigation and set the page to which the navigation jumps in the left navigation attribute. For example, the page to which the label jumps is “Label Management”.

Application of release

The first step is to apply the check

Click the Check button on the upper right of the page to check whether there is any problem with the application design flow logic.

Step 2 Set the user role

Enter service configuration, click User Role, and set the user name, email address, password, and role name for the application service.

Step 3 Create the publish configuration

Go to service Configuration, click Publish Configuration, and click the Create Trial Release configuration button at the top of the page to create a trial release configuration required to deploy the application.

* Note: Only one trial release configuration can be created per registered organization

Step 4 release the app

  1. Click the “Publish” button in the upper right corner of the page, select the trial publish configuration from the predefined configuration, and click Publish. The service will enter the publish state (the publishing process takes about 1 minute).
  2. After the application is published successfully, the corresponding address is displayed in the publication status area. Click enter and log in as the user to browse the status of the created application.

Registration trial

Welcome to register for free to experience low-code application development

  • Registered address: apps.gobuildrun.com/#/base/regi…
  • Website: gobuildrun.com
  • Wechat: BuildRun low code development platform