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

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

1. 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
   

2. Click New, set Model Name to Key, select Custom, and click Next.
   Figure 3 Configuring a custom model
   

3. Click Add Node, add the Value field, set the field type to Text, and click Next.
   Figure 4 Adding a node
   

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

6. Select the input widget. On the Events tab page, click next to on-blur.
   Figure 6 Setting an event
   

7. 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 
           } 
       })); 
   });

8. Click in the upper part of the page to save the page.
9. 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
   

10. 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
    

11. Click in the upper part of the page to save the page.
12. Click to preview the standard page.