Easy to wear - drop down radio

lately , It took a week to make a Web Tools . There are many pits in the middle , Fortunately, the appropriate documents are good , In addition to the basic function use and development introduction , There are also many special cases , Basically, the answer can be found , Or get inspiration from it . The reason for choosing the appropriate building , Except that the team has been using , Mainly because it is low code , The interface can be set up quickly , The development language is js, Very easy to get started .

1 necessary

Start with the documents that you think are very important and the commonly used shortcut keys , Put up ：

1.1 file

• Nails should be attached to the instruction manual
• It is appropriate to build a developer center
• Thematic documents （ Usage cases ）

1.2 Shortcut key

Writing js Code , Be sure to use the shortcut key , It's like following vscode The shortcut keys for the . These are the ones I often use

Shortcut key	explain
Copy lines up or down	⇧ + ⌥ + ↑[ or ↓]
Move the current line up or down	⌥ + ↑[ or ↓]
Multiline selection	⇧ + ⌥ + Cursor selection
Delete row	⇧ + ⌘ + K
Search backwards and add to selection （ Bulk changes ）	⌘ + D

2 Drop down the radio

Forms and Custom page , There are drop-down radio components , Call in the form “ Drop down the radio ”, The custom page is called “ Drop down to select ”, Both functions are the same , It's just different names on different pages .

From the table to the inside , Describe its use

2.1 Set display status

// NORMAL: Normal display ,DISABLED: Ban ,READONLY: read-only ,HIDDEN： hide 
this.$("selectField_kvnwz0n2").setBehavior("READONLY")
//  or 
this.$("selectField_kvnwz0n2").set("behavior", "READONLY")

2.2 Set up a place holder placeholder

this.$("selectField_kvnwz0n2").set("placeholder", " Please select a region ")

2.3 Set drop-down options

  this.$("selectField_kvnwz0n2").set("dataSource", [{
    
      text: ' China ',
      value: ' China '
    },
    {
    
      text: ' Japan ',
      value: ' Japan '
    },
    {
    
      text: ' South Korea ',
      value: ' South Korea '
    }
  ])

text Corresponding to the display value ;value Is the component value , namely this.$("selectField_kvnwz0n2").getValue()

tips： If you want to save other information , Like the capital , Can be stuffed into . It can be done by action export function onChange({value, actionType, item}) Of item obtain

2.4 Get drop-down options

this.$("selectField_kvnwz0n2").cachedDataSource
//  or 
this.$("selectField_kvnwz0n2").getProps().dataSource

2.5 Set the value

this.$("selectField_kvnwz0n2").setValue(" China ")

2.6 Get value

this.$("selectField_kvnwz0n2").getValue()

2.7 Drop down radio in subform

Let's take a look at the effect we want to achieve ：
Capital and city items in the subform , Default READONLY. When you select a country , Capital is automatically filled in ; Cities are based on the selected country , Change the placeholder prompt to “ choice { Country } City ”, Then update some cities in the country to the drop-down options

A lot of times , We need to handle the drop-down radio in the subform . Some functions cannot be realized through the above methods . Come on , Serve ：

• state and Component value , You can still use the original method setBehavior() and setValue() To set up
• placeholder and dataSource, We have to get through setComponentProps() Here it is

explain ：set("placeholder", yourPlaceHolder) and set("dataSource", yourOptions), Sometimes it can also be in action （ Such as ：onChange） Use in , But the setting in the first line of the first form is invalid . It really needs to be used , You can add a hide at the front of the page 、 A subform that does not submit data is OK . But for safety's sake , It is not recommended to use

2.7.1 Status and value

/** *  When the country of the submenu is selected, execute  */
export function onSubNationChange({
     value, actionType, item}) {
    
  console.log('onSubNationChange', value);
  const cityField = this.$(sub_single_city_id)
  cityField.setValue("")
  if(typeof value == "undefined"){
    
    cityField.setBehavior("READONLY")
    return
  }
  cityField.setBehavior("NORAML")
}

In the action on the same line of the submenu , Such as onChange(), You can go directly through this.$() To get other components in this line . As the above code shows , You can directly access the city components of the bank . If in another location , What you get is an array of components

setValue() In fact, there is a pit , To look down

2.7.2 Placeholders and drop-down options

First learn about this method , It is used to set the properties of a component in a subform
tableField.setComponentProps(groupId, fieldId, data)

• groupId： entry id, That is, in the line id,eg：tfitem_3. adopt tableField.getItems() All entries are available id
• fieldId: Components id
• data： Property value

export function onSubNationChange({
     value, actionType, item}) {
    
  console.log('onSubNationChange', value);
  const cityField = this.$(sub_single_city_id)
  cityField.setValue("")
  if(typeof value == "undefined"){
    
    cityField.setBehavior("READONLY")
    return
  }
  cityField.setBehavior("NORAML")

  //  Get current item Of groupId
  const groupId = this.$(sub_single_nation_id).formGroupId
  table_field.setComponentProps(groupId, sub_single_city_id, {
    
    placeholder: " choice " + value + " City ",
    dataSource: item.cities.map(it => {
    
      return {
    
        text: it,
        value: it
      }
    })
  })
}

In the above code , If you set it directly through the component , The first line of that first form is invalid . You can try , The code of the second half is changed as follows ：

  cityField.setBehavior("NORAML")
  
  //  Set directly through the component （ Not recommended ）
  cityField.set("placeholder", " choice " + value + " City ")
  cityField.set("dataSource", item.cities.map(it => {
    
      return {
    
        text: it,
        value: it
      }
    })
  )

2.7.3 setValue() Invalid ？

Now? , We are onChange() Do not set directly in , Instead, you start by looking for data from other forms , To set up ：

export function onSubNationChange({
     value, actionType, item}) {
    
  ... Omit ...

  //  The capital, 
  const capitalField = this.$(sub_single_capital_id)
  // capitalField.setValue(item.capital)
  const params = {
    
    formUuid: "FORM-2O86******01",
    searchFieldJson: JSON.stringify({
    
      textField_kvp2qxo7: value
    })
  }
  this.dataSourceMap['searchFormDatas'].load(params).then(resp => {
    
    console.log("searchCaptical=" + JSON.stringify(resp))
    let capital
    if (resp.data.length > 0) {
    
      capital = resp.data[0].formData.textField_kvp2qxo8
    }
    console.log("arr", capital)
    // capitalField.setValue(capital)
    const groupId = this.$(sub_single_nation_id).formGroupId
    table_field.setComponentProps(groupId, sub_single_capital_id, {
    value: capital})
  })
  ... Omit ...
}

We set the capital as mandatory . When you submit the form , I found the wrong report ：

Mingming has already set it in , It shows , Why did you report a mistake ？ If required is not set , When you view the data, you will find , This item is empty . Unless manually filled in
Tried table_field.setComponentProps(groupId, sub_single_capital_id, {value: capital}), Not good either.

Look up for ideas , This is done through a subform , The subform has setValue(), We use this method to solve . But note that the subform needs other data , Therefore, only the data of capital item can be updated . This update , Although the data is correct , But it doesn't show , So we have to add capitalField.setValue(capital)

	this.dataSourceMap['searchFormDatas'].load(params).then(resp => {
    
    console.log("searchCaptical=" + JSON.stringify(resp))
    let capital
    if (resp.data.length > 0) {
    
      capital = resp.data[0].formData.textField_kvp2qxo8
    }
    console.log("capital", capital)
    const tbVal = table_field.getValue()
    console.log("table old value", tbVal)
    tbVal[itemIndex].selectField_kvnwz0n8 = capital
    table_field.setValue(tbVal)
    capitalField.setValue(capital)
  })

among , The data format of the subform is as follows ：

If there were a better way , Please let , thank ！

3 appendix

3.1 data source

### 3.2 js Source code > demo Demo source code , Non tool source code （ The company's , Don't make it public ）

/** *  Drop down the radio _ Form case  * @author Ralap * @date 2021-11-07 */

const countries = [{
    
    text: ' China ',
    value: ' China ',
    capital: ' Beijing ',
    cities: [
      " Beijing ",
      " Shanghai ",
      " Hangzhou ",
      " Guangzhou ",
      " Shenzhen "
    ]
  },
  {
    
    text: ' Japan ',
    value: ' Japan ',
    capital: ' Tokyo ',
    cities: [
      " Tokyo ",
      " Osaka ",
      " Yokohama ",
      " Nagoya "
    ]
  },
  {
    
    text: ' South Korea ',
    value: ' South Korea ',
    capital: ' Seoul ',
    cities: [
      " Seoul ",
      " Busan ",
      " Jeju "
    ]
  }
]

let outer_single_field
let outer_text_field
let table_field

const sub_single_nation_id = 'selectField_kvnwz0n5'
const sub_single_city_id = 'selectField_kvnwz0n6'
const sub_single_capital_id = 'selectField_kvnwz0n8'

export function didMount() {
    
  console.log(`「 page  JS」： Current page address  ${
      location.href}`)
  this.initFields()
}

export function initFields() {
    
  outer_single_field = this.$("selectField_kvnwz0n2")
  outer_text_field = this.$("textField_kvnwz0n3")
  table_field = this.$("tableField_kvnwz0n4")

  outer_single_field.set("placeholder", " Please choose a country ")
  outer_single_field.set("dataSource", countries)

  //  Initialize the first line of the subform 
  const latestIndex = table_field.getItems().length - 1
  const groupName = table_field.getItems()[latestIndex]
  table_field.setComponentProps(groupName, sub_single_nation_id, {
    
    placeholder: " Please choose a country _sub",
    dataSource: countries
  })
  //  The first line can also be assigned in this way 
  // this.$(sub_single_nation_id)[0].set("placeholder", " Please choose a country _sub")
  // this.$(sub_single_nation_id)[0].set("dataSource", countries)
}

export function onOuterNationChange({
      value, actionType, item }) {
    
  console.log('onOuterNationChange: value', value);
  console.log('onOuterNationChange: actionType', actionType);
  console.log('onOuterNationChange: item', item);
  console.log("dataSource1:", outer_single_field.getProps().dataSource)
  console.log("dataSource2:", outer_single_field.cachedDataSource)
  outer_text_field.setValue(item.capital)
}

/** *  When the country of the submenu is selected, execute  */
export function onSubNationChange({
     value, actionType, item}) {
    
  console.log('onSubNationChange', value);
  const cityField = this.$(sub_single_city_id)
  cityField.setValue("")
  if(typeof value == "undefined"){
    
    cityField.setBehavior("READONLY")
    return
  }
  cityField.setBehavior("NORAML")

  //  The capital, 
  const capitalField = this.$(sub_single_capital_id)
  // capitalField.setValue(item.capital)
  const itemIndex = table_field.getItems().indexOf(capitalField.formGroupId)
  const params = {
    
    formUuid: "FORM-2O86******01",
    searchFieldJson: JSON.stringify({
    
      textField_kvp2qxo7: value
    })
  }
  this.dataSourceMap['searchFormDatas'].load(params).then(resp => {
    
    console.log("searchCaptical=" + JSON.stringify(resp))
    let capital
    if (resp.data.length > 0) {
    
      capital = resp.data[0].formData.textField_kvp2qxo8
    }
    console.log("capital", capital)
    const tbVal = table_field.getValue()
    console.log("table old value", tbVal)
    tbVal[itemIndex].selectField_kvnwz0n8 = capital
    table_field.setValue(tbVal)
    //  add , To display 
    capitalField.setValue(capital)
  })

  //  Get current item Of groupId
  const groupId = this.$(sub_single_nation_id).formGroupId
  table_field.setComponentProps(groupId, sub_single_city_id, {
    
    placeholder: " choice " + value + " City ",
    dataSource: item.cities.map(it => {
    
      return {
    
        text: it,
        value: it
      }
    })
  })

  // set() Mode setting , defective 
  // cityField.set("placeholder", " choice " + value + " City ")
  // cityField.set("dataSource", item.cities.map(it => {
    
  // return {
    
  // text: it,
  // value: it
  // }
  // })
  // )
}

/** * TableField onAddClick */
export function onSubAddClick(newGroupId){
    
  console.log('onSubAddClick');
  //  Add an item to the subform , Initialize it .
  //  You can't get through here yet this.$(sub_single_nation_id) find 
  const latestIndex = table_field.getItems().length - 1
  const groupName = table_field.getItems()[latestIndex]
  table_field.setComponentProps(groupName, sub_single_nation_id, {
    
    placeholder: " Please choose a country _sub",
    dataSource: countries
  })
}