BuildRun Low Code Development Tutorial Section 5 | Equipment Management Development

Posted May 27, 202010 min read

Course Overview

Since device management needs to be associated with products and device groups, and dynamic lists need to be defined, the construction of device management related functions is introduced as a separate course. This course involves major new knowledge points:

  • Dynamic value list definition
  • Query area use value list
  • Added and updated area usage value list
  • View detailed information page for read-only information

Course content

1 . Create Device page

  1. Select the Create link in the upper right corner to enter the create page window, and enter the following information:

    1. Name:device
    2. Code:DEVICES
    3. Title:Device Management
  2. After completing the information, click the "Create" button in the lower left corner of the Create Page window to complete the page creation and enter the page design view.

  3. Click the Data Source icon at the top to switch to the Data Source Definition view.

  4. Click the () plus sign in the upper left corner and select Device from the pop-up list to create a product data source.

  5. Click the Page Design icon at the top to switch to the Page Design interface.

1.1 Define Device List Section

  1. Expand the Equipment node in the structure view of the left page, select the following _ default Section _ node, and modify the information under the Section attribute on the right:

    1. Name:device list;
    2. Code:listDevices.
  2. Drag the Data component-> List component under the Component list on the right to the middle area. After the virtual box appears, release it and a Component add data source window will pop up. By default, the data source _ device _ is selected, click the OK button directly.

  3. Expand the Equipment node in the structure view of the left page, select the following Product List-> Table Components node, and drag the field from the right Field to the middle configuration area:

    1. Search(Advanced Search) default fields:product, device group, device name
    2. List field:device name, product(product-> product name), cloud protocol, device group(device group-> group name)
  4. Add the following buttons in the middle configuration area:

    1. List button:Add
    2. Button in list row:Details(custom button), edit
  5. Click the Save Edit button in the upper right corner to save.

1.2 Define and create device Section

  1. Move the mouse to the plus sign behind the device node in the left page structure view ** , select **Add Section to pop up Enter information in the Create Section window on the page "Device" :

    1. Name:Add device
    2. Code:createDevice
  2. Select New Device Section, drag the Data Components-> Forms component under the Component List on the right to the middle area, and release the popup after seeing the virtual box Component In the Add Data Source window, see that the data source _ device _ has been selected by default, and directly click the OK button.

  3. Select the New Device-> Form Components node from the left page structure view, and drag the field from the right Field to the middle configuration area to form a two-column layout:

    1. First line:device name, product
    2. Second line:Uplink system, device group
    3. Third line:Operator, Shanglian Network
    4. Fourth row:MAC, manufacturer
    5. Fifth line:serial number, software version
    6. Sixth line:hardware version, device location
    7. Seventh line:location longitude, location latitude
    8. Eighth line:connection username, device secret key
  4. Select Add Device Section

  5. Add Add button to Section button area:

    1. Button text:_Add _ \ * \ *;
    2. Button icon:add;
    3. Data source:device;
    4. dataset method:submit;
    5. Post-processing action:Close Section;
    6. Section after the post-processing action is closed:Add device
  6. Add Cancel button in Section button area:

    1. Button text:Cancel;
    2. Button icon:cancel;
    3. Data source:device;
    4. dataset method:delete;
    5. Operation record:Current record
    6. Post-processing action:Close Section;
    7. Section where the post-processing action is closed:Add device
  7. Click the Save Edit button in the upper right corner to save.

5.1createDevice.png

1.3 Define View Device Section

  1. Move the mouse to the plus sign behind the device node in the left page structure view ** , select **Add Section to pop up Enter information in the Create Section window on the page "Device" :

    1. Name:View device
    2. Code:viewDevice
  2. Select View device Section, drag the Data component-> Form component under the Component list on the right to the middle area, and release it after seeing the virtual box will pop up Component addition In the Data Source window, see that the data source _ device _ has been selected by default, and click the OK button directly.

  3. Select the Add Device-> Form Components node in the structure view on the left page.

  4. Drag the field from Field to the middle configuration area to form a two-column layout, and set all fields Can be edited under Component Properties:No:

    1. First line:equipment name, product(product-> product name)
    2. Second line:Uplink system, device group(device group-> group name)
    3. Third line:Operator, Shanglian Network
    4. Fourth row:MAC, manufacturer
    5. Fifth line:serial number, software version
    6. Sixth line:hardware version, device location
    7. The seventh line:equipment number
    8. Eighth line:creation time, creator(creator-> user name)
  5. Check View device Section

  6. Add Close button to Section button area:

    1. Button text:_Close _ \ * \ *;
    2. Button icon:close;
    3. Data source:device;
    4. Logical type:None;
    5. Post-processing action:Close Section;
    6. Section where the post-processing action is closed:View device
  7. Click the Save Edit button in the upper right corner to save.

5.2viewDevice.png

1.4 Definition Update Device Section

  1. Move the mouse to the plus sign behind the device node in the left page structure view ** , select **Add Section to pop up Enter information in the Create Section window on the page "Device" :

    1. Name:Update device
    2. Code:updateDevice
  2. Drag the Data component-> Form component under the Component list on the right to the middle area. After the virtual box appears, release it and a Component add data source window will pop up. By default, the data source _ device _ is selected, click the OK button directly.

  3. Select the Update Product-> Form Components node from the left page structure view, and drag the field from the right Field to the middle configuration area to form a two-column layout:

    1. First line:device name, product(not editable)
    2. Second line:Uplink system, device group
    3. Third line:Operator, Shanglian Network
    4. Fourth row:MAC, manufacturer
    5. Fifth line:serial number, software version
    6. Sixth line:hardware version, device location
    7. Seventh line:location longitude, location latitude
  4. Click the Save Edit button in the upper right corner to save.

  5. Select Update Device Section

  6. Add Update button in Section button area:

    1. Button text:_Update _ \ * \ *;
    2. Button icon:save;
    3. Data source:device;
    4. dataset method:submit;
    5. Post-processing action:Close Section;
    6. Section where the post-processing action is closed:Update device
  7. Add Cancel button in Section button area:

    1. Button text:Cancel;
    2. Button icon:cancel;
    3. Data source:device;
    4. dataset method:reset;
    5. Operation record:Current record
    6. Post-processing action:Close Section;
    7. Section where the post-processing action is closed:Update device
  8. Click the Save Edit button in the upper right corner to save.

1.5 Create a device and update a device in the device list section

  1. In the structure view on the left page, select Device List-> Table Components

  2. Set the List button to add properties:

    1. Button icon:add
    2. Post-processing action:Open Section
    3. Pop-up Section Width:_ _
    4. ** Section opened after post-processing action:Add device
  3. Set the properties of the button details in the list row **:

    1. Button icon:details
    2. Data source:device;
    3. dataset method:query;
    4. Post-processing action:Open Section
    5. Pop-up Section Width:_ _
    6. ** Section opened after post-processing action:View device
  4. Set the properties of the button Edit in the ** List row:

    1. Button icon:mode \ _edit
    2. Post-processing action:Open Section
    3. Pop-up section width:medium
    4. Section opened by post-processing action:update device
  5. Click the Save Edit button in the upper right corner to save.

2 . Menu settings

Select the menu management icon on the left side of the application designer to enter the menu management interface, and add menu items under the Internet of things management menu:

  • Navigation name:Device management
  • icon:scissors
  • Jump page:device

3 . Publish and run the application

Select the Publish button at the top right corner of the application designer to release the application, select Internet of Things Low Code Service(Trial Configuration) release configuration, click the OK button to start publishing the application, and wait for the application to be released.

5.3deviceApp.png

4 . Continuous optimization of applications

5.4deviceAppSearch.png

5.5addDeviceLOV.png

The fields in the red circle in the figure hope to be a dynamic list of values, by selecting values that have been maintained in the device group and product management.

4.1 Define a list of dynamic values for device groups and products

From the entity object in the business object relationship diagram Equipment group Click the icon above to enter the business object property view interface:

  1. Select the Related Value List tab to enter the related value interface, click Create Related Value List to enter the Create Related Value List interface, and enter the following information:

    1. _ name _:device group
    2. Description
  2. Click the Create button to create a device group and select Device Group to enter the edit associated value list interface;

  3. Right side Associated value list property Set in Whether searchable:Yes

  4. Drag the field from the right side Field to the middle configuration area:

    1. Search(Advanced Search) Default field:Group name
    2. List:Group name, group description
  5. Click the Save button to finish editing

  6. Enter Product business object to create a list of associated values Product:

    1. Search(Advanced Search) Default field:Product name
    2. List:Product name, product type, cloud agreement, product description

5.6editLOV.png

4.2 Set the associated value list for the device list search and create device interface

  1. Select the page Device to enter the page designer;

  2. Select Table component in Device List Section;

  3. Select in the default field of ** Search(Advanced Search):

    1. Product:The value list is _ Product _;
    2. The device group value list is _ device group _.
  4. Select Form component in New device Section;

  5. Select the following field settings:

    1. Product:The value list is _ Product _;
    2. The device group value list is _ device group _.
  6. Select Form component in Update device Section;

  7. Select the following field settings:

    1. Equipment Group The list of values is _ Equipment Group _.

4.3 Publish and run the app

5.7BriotApp.png

Click the Details link in the device list row to view device details:

5.7.1viewDevice.png

The query area field uses the associated value list to select values:

5.8listDevicesSearchLov.png

Use the associated value list to select values in the newly added device form:

5.9createDeviceLov.png

-To be continued--

This section completes the construction of related functions of device management. The next section will introduce how to build the related functions of the V1.5 version we plan in the second section. This series of development tutorials is updated every Monday.

Review of the first four lessons

[BuildRun Low Code Development Tutorial Section 1 | Project Environment Preparation]( http://mp.weixin.qq.com/s?__biz=MzA4MzU5NDI3NA==&mid=2247485014&idx=2&sn=09be1968e8144b5381498baa51905191&chksm=9ff55b1ba882d20d15e8b5d8

BuildRun low Source Development Tutorials Section | combing the functional requirements and tasks defined

BuildRun low Source Development Tutorials Section | design and data model definitions

BuildRun Low Code Development Tutorial Section 4 | Product and Device Group Management Development

What to do if you encounter problems

In the process of using Buildrun, you can click the user feedback button in the lower right corner of the page to submit feedback to us, and we will deal with it in the first time.

feedback.png

BuildRun brings the capabilities of vision-based enterprise-level application creation, integration, deployment, lifecycle management and distribution in a multi-cloud architecture environment. The mission is to help enterprises improve software development productivity and business agility with a cloud-native modern software architecture. It provides an enterprise-level DevOps platform and an enterprise-level low-code development platform to help hide the complexity of the underlying environment that applications depend on and let everyone They only need to focus on the business logic and enable the team to quickly and continuously transform their ideas into real business value in new ways.

Welcome to register for free and try out low code application development

Related Posts