Slate Foundry : Modify parameter of a Dropdown programmatically

Question

In Slate foundry, I would modify parameter of a Dropdown programmatically. Change the display value or disable value. But it doesn't work.

My code

const select ={{w_selectEndMonthYear}}
select.selectedValue = "202201"
select.selectedDisplayValue = "January 2022"
select.disabled = true
console.log({{w_selectEndMonthYear}})
return {{w_selectEndMonthYear.selectedDisplayValue}}

in my console, I have

{selectedDisplayValue: 'January 2022', selectedValue: '202201', disabled: 'true'}

It seems good, but neither the return nor the display of the widget changed

Thanks for your help

score 1 · Accepted Answer · answered Aug 12 '22 at 13:02

You're on the right track - to template the selected value of a dropdown list programmatically you need to change to the </> tab of the dropdown widget configuration and use Handlebars to provide a valid default selection for both the the selectedValue and selectedDisplayValue parameter.

Note that you cannot set widget properties from inside a Slate Function. You need to return the value (or a json object with multiple values to reference) and then use a Handlebar statement in the widget configuration to template the appropriate values into the widget configuration.

You can read a bit about this in the context of resetting widget selection state to default values in this section of the documentation.

You can also search your Foundry instance for some helpful Slate tutorials - find the Foundry Training and Resources project and navigate to the Reference Examples/App Building In Slate/1. Tutorials folder to find a series of interactive Slate apps demonstrating the many patterns for using Handlebars, Functions, and other Slate components.

score 0 · Answer 2 · answered Aug 30 '22 at 09:32

The easiest way i via Functions, also to deliver the the content of dropdown. Just a hint, to sort the content you need 'transformColumnSchemaToRowSchema' and 'transformRowSchemaToColumnSchema'

Here is a Slate JavaScript snippet for enabling/disabling a button: Similar you could do this for drop-downs i think.

// Collect Inputs for Validation
// -----------------------------
var inputs = {
    UserID: _.trim(_.toUpper({{w_pD_AdmUserAdd_UserID.text}})),
    Foundry: _.trim({{w_pD_AdmUserAdd_Foundry.placeholder}}),
    NameFirst: _.trim(_.toUpper({{w_pD_AdmUserAdd_NameFirst.text}})),
    NameLast: _.trim(_.toUpper({{w_pD_AdmUserAdd_NameLast.text}})),
    Email: _.trim(_.toUpper({{w_pD_AdmUserAdd_Email.text}})),
    Team: {{w_pD_AdmUserAdd_Team.selectedValue}},
    Company: {{w_pD_AdmUserAdd_Company.selectedValue}}
}
// Initialize Variables
// --------------------
var disable = false;
var messages = [];
// Implement Form Validation Checks
// --------------------------------
// Check if all the required fields have a value
if (!(inputs.UserID &&
     inputs.Foundry &&
 inputs.NameFirst &&
 inputs.NameLast &&
     inputs.Email &&
     inputs.Team &&
     inputs.Company
    )){
disable = true;
messages.push("Please complete all required fields.");
}
var email_regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (inputs.Email && !email_regex.test(inputs.Email)){
messages.push('Please enter a valid email for "Email"')
disable = true;
}
var data_users = {{s_buyers.data}}
var index_email = data_users.str_email.indexOf(inputs.Email)

if (inputs.Email && index_email !== -1){
  disable = true;
  messages.push('This Email already exist')
}  
var index_userid = data_users.str_buyer_id.indexOf(inputs.UserID)
if (inputs.UserID && index_userid !== -1){
  disable = true;
  messages.push('This User ID already exist')
}
return {
inputs,
disable,
messages
}

Slate Foundry : Modify parameter of a Dropdown programmatically

2 Answers2