change description field on screen after chosing a picklist value

Hi Lyn,

Where are you defining the mapping between source Picklist field value and associated “Description” field value? e.g. I’m assuming you have something like this:

Source Picklist field: “Options__c”
Choice 1
Choice 2
Choice 3

and what you want is for the Description field to conditionally show different values based on selected value of “Options__c”, e.g.

Choice 1 —> “description for choice 1”
Choice 2 —> “description for choice 2”
Choice 3 —> “description for choice 3”


So my question is, where are these “descriptions” stored? Do you just want to hard-code them into your page, or do you have them stored in some other Custom Object in your org? How long are the corresponding descriptions? If they’re really long, and there’s a lot of them, then having a Custom Object to store them might make sense, as it will be more maintainable. If they’re really short, then have you considered using Dependent Picklists to achieve this?

Also, is this purely a “read-only” description, or when the source picklist is changed, do we want to actually be saving the corresponding Description field value to the Description field in Salesforce?

Those considerations aside, it’s absolutely possible to achieve this.

Here’s an example, where we’ll just hard-code the Picklist-value-to-Description mapping in memory.

1. We are using the Product object in Salesforce, and the “Family” field will be our “Source Field” and the “Description” field will be our dependent Description field.
2. In our Skuid Page, we have a Model called “Product2”, with the Family and Description fields pulled in. We then have a Field Editor that shows these fields.
3. We go to “Resources” > “JavaScript”, and add a new JavaScript Resource with Resource Location set to Inline (NOT Inline Snippet). Here is the body of the Resource:

(function(skuid){   
   var $ = skuid.$;
   $(function(){
       
       //
       // CONFIGURATION
       //
       
       
        // This is the Model that we are working on
        var MODEL_ID = ‘Product2’;
        // This is the field whose values “control” our value
        var SOURCE_FIELD_ID = ‘Family’;
        // This is the Id of the Description field
        var DESCRIPTION_FIELD_ID = ‘Description’;
        // These are the mappings of Descriptions by source field
        var DESCRIPTIONS_BY_VALUE = {
            ‘HMO’: ‘A health maintenance organization (HMO) is an organization that provides or arranges managed care for health insurance, self-funded health care benefit plans, individuals, and other entities in the United States and acts as a liaison with health care providers (hospitals, doctors, etc.) on a prepaid basis.’,
            ‘PPO’: 'In health insurance in the United States, a preferred provider organization (or PPO, sometimes referred to as a participating provider organization or preferred provider option) is a managed care organization of medical doctors, hospitals, and other health care providers who have agreed with an insurer or a third-party administrator to provide health care at reduced rates to the insurers or administrators clients. '
        };
        // This will be shown if there is no corresponding Source field value
        var DEFAULT_VALUE = ‘No Description for this value’;
        
        var model = skuid.model.getModel(MODEL_ID);
        var row = model.getFirstRow();
        
        var getDescription = function(){
            var sourceFieldValue = model.getFieldValue(row,SOURCE_FIELD_ID,true);
            var descriptionValue = DESCRIPTIONS_BY_VALUE[sourceFieldValue] || DEFAULT_VALUE;
            model.updateRow(row,DESCRIPTION_FIELD_ID,descriptionValue);
            $.each(model.registeredLists,function(){
               $.each(this.renderedItems,function(rowId,item){
                  if (rowId===row.Id){
                      $.each(this.fields,function(){
                         if (this.id===DESCRIPTION_FIELD_ID){
                             this.render();
                         } 
                      });
                  } 
               });
            });
        };
        
        
        var listener = new skuid.ui.Field(row,model,null,{fieldId:SOURCE_FIELD_ID,register:true});
        listener.handleChange = function(){
            getDescription();
        };
   });
})(skuid);


4. You will need to make changes to all of the variables under “Configuration” that are in ALL_CAPS, e.g. MODEL_ID, SOURCE_FIELD_ID, DESCRIPTION_FIELD_ID, etc., as appropriate for your scenario.
5. We save and preview our page.

We get something like this, where when you change Product Family, the Description field is updated:

Hi,

Thanks, I can get the solution you provided working if the description field was in the same object.

In our case the description field is stored in a custom object and will not be changed, just displayed on the screen when the source picklist field is selected.  There is a relationship between the source picklist field and the custom object for the description, so my description field id is:

        var DESCRIPTION_FIELD_ID = ‘Commercial_Message__r.Description__c’;

I take it that I cannot update the ‘Commercial_Message__r.Description__c’ in the model which is why the above does not work for me?

Thanks,
Lyn.

FYI…Solved this by adding a template field into the table and giving it an id in the template property.  Made the field readonly.  This then allowed me to update the html when text on change of the picklist value using something like the following:

$('#myDivID).html(someNewTextHere);