Overview of application function modules

Enterprise portal applications are composed of five pages, and different pages have different functional modules, as shown in the figure below:

Application show

The main function of enterprise portal application is to display enterprise dynamics and enterprise information. The application details are shown as follows:

Application Data Source design

Data model creation

Before creating an application, we need to know that when the application uses dynamic data function modules, we need to create the corresponding data model to manage. For an enterprise portal application, the data model and fields we need to create are as follows:

Data entry

After the data model is created, it is necessary to go to the data management background to input experience data. The steps are as follows:

  1. inThe data modelClick on the pageData Management backgroundTo enter.
  2. Enter theData Management background > My data sourceOn the page, change the data toExperience data.
  3. Using the enterprise dynamic table as an example, clickManagement dataAccess the corresponding management background.
  4. Click on thenewThe data creation page is displayed.
  5. Click on the data Creation page to experience data entrysubmitCan.

? In the process of building an application, you need to view the real status of the page through the real-time preview. In addition, the data to be invoked by the real-time preview is experience data. Therefore, you are advised to input experience data before application development to facilitate application development and debugging.

The premise condition

  • Complete the data model design of enterprise portal application.
  • The custom application is created.

Step 1: Create a page

Create a new page and name itEnterprise Portal Home page.

Step 2: Create the home page banner diagram module

In the editing area on the right of the page, select a valueOrdinary containerComponent, which is then placed in the normal container componentshufflingComponent, which can then be added in a multicast componentThe pictureComponent to realize image rotation. If there is a requirement for image configuration, you can select the image component and replace the image in the configuration area on the right.

? Common containers can be used for unified management and style adjustment of components. Therefore, during application development, you are advised to place components in common containers by module to facilitate management and improve development efficiency.

Step 3: Create the application scenario navigation

By looking at the page design, we can see that the application navigation consists of four navigation tabs arranged horizontally, so to achieve this function, we need to use model variables, grid layout components, and component loops.

Create a single navigation Tab

  1. Create a normal container and add to the containerGrid layoutComponent that configures the column scale property of the grid component to “12”.
  2. In the grid containerColumns slotDrag into the normal container, and place the image and text components in the normal container.

? Note that when placing the image and text components, the image component in the outline tree should be above the text component, otherwise the position will be reversed.

Create model variables

  1. Click on the upper rightvariableThe page for editing variables is displayed.
  2. On the current page, clickCreate buttonCreate model variables.
  3. Enter the variable id and select the variable type asThe model variables, data source selectionApplication Scenario Table, variable initialization method selectionQuery List – Built in (Wedged Records). According to the design drawing, only four navigation tabs are displayed here, so you can adjust the method parameters according to the conditions.

Component binding loop

  1. Select the normal container component and theattribute > General configuration > Cycle showclickBind loop button.
  2. In the pop-up window, select the model variable you just created and clickdetermine.
  3. When you return to the editor page, select the image component under the container and click on the rightData binding button.
  4. Select the loop variable Tab in the popover and select the corresponding data model field to complete the data binding.
  5. Bind the data of the text component in the above way, and the page style is as follows:

Style adjustment

After completing the loop and data configuration, the style of the module is not displayed as shown in the application design drawing. Therefore, we need to adjust the style of the component to meet the expectation. First, adjust the width and height of the picture component.

  1. Click the style Tab in the edit area on the right and adjust the width and height of the picture component to 100.
  2. You can see that the size of the image becomes normal, then we adjust the center state of the image and text components. Click on the normal container component, in the Configuration area style Tab, select The layout mode to Elastic layout, main axis to vertical, main axis alignment to horizontal center, and secondary axis alignment to midpoint.

    About elastic layout: Components in a container with elastic layout Settings adjust their layouts based on the current spindle orientation, spindle alignment, and accessory axis alignment.

  3. Then adjust the width of the normal container components to 200, and you can see that the components are laid out as shown in the design diagram.

Step 4: Enterprise dynamic navigation

Create a module title

Create a normal container and add in the normal containerText componentIn the configuration area on the right, change the content of the text component to “What’s New” and the alignment to “Align left”, then click the Style Tab and set the text property to “thick”.

Creating a graphic list

Add a normal container, and then add under that containerGraphic display itemComponent, and then enable the component in the right configuration areaCustom contentOptions.

? With the custom content option turned on, the graphic display item component can display content as a slot by placing the component in the main content slot.

Adjust graphic list component content

Delete the text in the “Content” configuration item in the right configuration area, and then insert two text components into the main content slot. After modification, the component style is as shown in the picture below:

Create model variables

withStep 3Is created in the same way, create model variables, variable bindingsEnterprise dynamic table, variable initialization method selectionQuery List – Built in (Wedged Records). According to the design drawing, only the four dynamics with the latest time are displayed here, so the method parameters are adjusted according to the conditions.

Component binding loop

  1. Bind the loop for the parent container of the graphic display item, as described aboveLoop binding.
  2. Select the Graphic display item component to bind data for the image properties of the graphic display item component.
  3. Do the same for the text component.

Module style adjustment

  1. Select the parent container of the graphic display item, click style Tab in the configuration area on the right, and selectFrame typeAs the dotted line,Border widthIs 1, and the color is gray.
  2. Adjust the spacing of graphic display items in the parent container’s style Tab, as shown below:
  3. Select the outermost container and adjust the distance between the module and the application scenario module. At this point, the enterprise dynamic module construction is complete.

Step 5: Enterprise partner module

In the same way as the application scenario module is created, the grid layout, text and image components are used to achieve this. For details, seeStep 3.

Application scenario Details page construction

Step 1: Create a page

For details about how to create an application scenario page, see the previous section.

Step 2: Create the scenario details module

  1. The scene detail module is composed of title and detail content. Create a parent container, and then add text component and rich text display component respectively to the parent container to complete the creation of the module.
  2. Modify the text font size and bold it in the Style Tab.

Step 3: Create the signing customer module

Can seeApplication scenariosThe creation method is the same.

! The display content of the details page can be obtained according to the forward parameters. For the variable binding of the module, see Logical Design of application Scenario Page.

Enterprise dynamic detail page setup

Step 1: Create a page

For details about how to create an application scenario page, see the previous section.

Step 2: Create the scenario details module

  1. The scene detail module is composed of title and detail content. Create a parent container, and then add two text components (corresponding to title and date respectively) and rich text display component respectively to the parent container to complete the creation of the module.
  2. Modify the text font size and bold it in the Style Tab.

! The display content of the detail page can be obtained according to the skipping parameter. For the variable binding of this module, see dynamic Page Logic Design of the home page.

Dynamic list page building

The building method of dynamic list page is roughly the same as that of the dynamic list module on the home page. It is worth noting that the dynamic list page here is to display all dynamics, so the bound model variables are different. The model variables here should call the ** viewlist-built-in (WedaGetList)** method.

Enterprise contact page setup

Step 1: Home page banner diagram module

The setup method is the same as the banner module of the home page, seeAbove,.

Step 2: Brand profile module

  1. Create a normal container and add an 80% width container as the module background. Set the container background color to gray.
  2. Select the parent container, select the Elastic layout from the style Tab in the editing area on the right, and center the container you just used as the background.
  3. Add two text components to the background container as carriers for the title and introduction content.
  4. Select the first text component, set the font to bold in the component’s style Tab, and change the text content to a business profile.
  5. Select the second text component and set its alignment tofull-justifiedAnd change the text content to the corresponding introduction content, and adjust the maximum number of lines of the text component according to the introduction content.

Step 3: Contact our module

  1. As with the brand profile module, create a background container and center it, add a text component to the background container as the module title, change the text component to “Contact us” and make it bold.
  2. Then you add two grid layout components to the container, with a uniform column scale of 12 in the configuration area.
  3. Insert the picture component and text component into the slot of the first grid layout component, replace the component content with icon and corresponding copy respectively, and adjust the size and position of the component according to the actual demand.
  4. Repeat the preceding steps to add the enterprise email address.

Navigate to the application scenario details page on the home page

Design idea: Obtain the data model ID corresponding to the current click on Tab element through the low-code method, then set the jump time for Tab element, and pass the data model ID as a parameter to the application scenario detail page. Application Scenario The detail page invoks the WedaGetRecords method according to the data model ID to obtain the corresponding data and display it on the front-end page.

Step 1: Create common variables

forEnterprise Portal Home pageThe page creates a normal variable to receive the data model ID returned when the navigation Tab is clicked. Click on the abovevariableOn the current page, create a common variable namedgetId, the data type is a string.

Step 2: Configure events for the navigation Tab

Bind variable assignment methods

  1. Select the normal container corresponding to the navigation Tab in the outline tree and select the configuration area on the rightClick on theTrigger condition, call up event configuration popover.
  2. Select execute action asVariable assignmentSelect the common variable getId that you just created.
  3. Click the image aboveA variable’s valueOn the right side of theData binding buttonBring up the data binding popover and select _id from the loop object Tab.
  4. Click after completing the variable bindingsaveCan.

Bind the page jump method

  1. Select the normal container corresponding to the navigation Tab again and select the trigger condition when clicking in the configuration area on the right to bring up the event configuration popup.
  2. In the event pop-up window, configure the page hopping and clickCreating a Parameter variable.
  3. After the parameter variable is created, clickVariable binding button.
  4. Click after binding the first normal variable to receive the data model IDsaveCan.

! Note the sequence of method creation in this step. You need to assign variables before binding the page jump method; otherwise, the parameter passed during page jump will be null.

Create model variables

Create model variables for the application scenario detail page, and use the parameters passed by the home navigation Tab to query and render data.

  1. Click in the upper right corner to switch toApplication scenario details page, click abovevariable, create model variables for the page, bind application scenario table, and select variable initialization method asQuery single – Built-in (wedaGetItem), and then the variable binding is performed for the data identity at the variable initialization input parameter.
  2. In the variable binding popup window, select the parameter variable just generated through the page jump and clicksave.
  3. Select the components on the application scenario details page and click in the configuration area on the rightVariable binding button.
  4. Select the model variable you just created to complete the binding.

Methods test

Access the application home page, enable the real-time preview function, and click Application Scenario Tab to check whether the application can jump to the application page and whether the details are displayed as expected.

Navigate to the dynamic details page from the dynamic list on the home page

Design Idea: This function is implemented in the same way as Tab navigation. The data source ID is passed in when you jump to the detail page.

Step 1: Create common variables

Create a normal variable for the current page to receive the data model ID returned when the click list is received. Click on the abovevariableOn the current page, create a common variable namedgetListID, the data type is a string.

Step 2: Configure events for the list

Bind custom methods

  1. Select the common container corresponding to the list in the outline tree and select the configuration area on the rightClick on theTrigger condition, call up event configuration popover.
  2. Select execute action asVariable assignmentSelect the common variable getListID that you just created.
  3. Click the image aboveA variable’s valueOn the right side of theData binding buttonBring up the data binding popover and select _id from the loop object Tab.
  4. Click after completing the variable bindingsaveCan.

Bind the page jump method

  1. Select the common container corresponding to the list again and select the trigger condition when clicking in the configuration area on the right to raise the event configuration popup.
  2. In the event pop-up window, skip to the page and configure parameter transfer, and clicksave.

! Note the sequence of method creation in this step. You need to assign variables before binding the page jump method; otherwise, the parameter passed during page jump will be null.

Create model variables

Create model variables for the enterprise dynamic detail page, and use the parameters passed by the home navigation Tab for data query and rendering.

  1. Click in the upper right corner to switch toEnterprise dynamic details page, click abovevariableCreate model variables for this page and select variable initialization method after binding enterprise dynamic tableQuery single – Built-in (wedaGetItem), and then variable binding for the data identity at the variable initialization input parameter.
  2. Select components in the dynamic details page and click in the configuration area on the rightVariable binding button.
  3. Select the model variable you just created to complete the binding.

Methods test

Go to the home page of the application, enable the real-time preview function, and click the list to check whether the application can be redirected and whether the details page is displayed as expected.

? This module method can be reused for the operation of dynamic list page skipping details page.

Realize the bottom Tab bar jump

  1. It can be seen from the application design diagram that Tab bar components need to be created at the bottom of three pages of the application, namely, the application home page, dynamic list page and enterprise contact page.
  2. Take the home page as an example. After entering the home page, select the Tab Tab component in the left component area. The component is automatically fixed to the lower part of the page.
  3. Configure Tab components in the right configuration area. The parameters are described as follows:
  4. After the configuration is complete, click The Enable route button and set the routing mode tojumpAfter the configuration is complete, click the corresponding Tab to switch to the page.
  5. According to the same way to the dynamic list page and enterprise contact page Tab column configuration, so we will complete the enterprise portal application.