How Do I Set a Drop-Down List with Filtering Function on a Standard Page?

Updated on 2025-03-20 GMT+08:00

View PDF

Description

How do I set a drop-down list to display filtered values based on the input field, instead of all values?

For example, an offering has three states: on-shelf, off-shelf, and test. Currently, the options in the drop-down list box A on the offering navigation bar are offerings in all states. As a result, a large amount of dirty data is generated and correct data cannot be selected. In this case, add an input box B. Then you can filter the options in the drop-down list box A based on the value entered in the input box B. Enter Online in the input box B. Only offering options in Online state are displayed in the drop-down list box A, as shown in Figure 1.

Figure 1 Implementation result

Solution

Set the input widget and drop-down list box widget on the standard page to customize the options in the drop-down list box.

Drag an input widget to the work area of the standard page, and click in the property setting area to bind the data.

Figure 2 Dragging the input box
Click New, set Model Name to Key, select Custom, and click Next.

Figure 3 Configuring a custom model
Click Add Node, add the Value field, set the field type to Text, and click Next.

Figure 4 Adding a node
In this example, you do not need to add a method. Click OK.
In the Select Model dialog box, select the Value field and click OK.

Figure 5 Selecting the field
Select the input widget. On the Events tab page, click next to on-blur.

Figure 6 Setting an event

In the code editing area, edit the event code and click Create.

Figure 7 Custom JavaScript code

The offering object Namespace__Product__CST exists in the system and contains the name and Namespace__status__CST fields, which indicate the offering name and offering state, respectively. This event code is used to obtain the name of the offering whose value in the input box is the same as the offering state and return the offering name to the list.

// Current widget
// let _component = context.$component.current 

// Obtain the data model named ${modelName}.
// let _model = context.$model.get('${modelName}') 
// debugger 
context.object("Namespace__Product__CST").query({condition:{ 
    conjunction: "AND", 
    conditions: [ 
        { field: "Namespace__status__CST", operator: "eq", value: context.$model.get("Key").getData().value } 
    ] 
}}).then(function (resp) { 
    context.$model.get("list").setData(resp.map(function (o) { 
        return { 
            display: o.name, 
            value: o.id 
        } 
    })); 
});

Click in the upper part of the page to save the page.
Drag a drop-down list box widget to the working area of the standard page. On the Properties tab page, click + next to Property Binding, and then click .

Figure 8 Dragging a drop-down list box widget
Refer to 2 to 6, create a data model named list, add the display and name fields to the model, select list, and click OK.

Figure 9 Adding the list model
Click in the upper part of the page to save the page.
Click to preview the standard page.