Populate the Short Description Field Based on Record Producer name in Portal Widget

[Bhavani3]

in Widget, I created 2 fields one  is-Record producer name-choice field and one is Description field of Record Producer

If I select Record Producer name then Description field must be populate automatically.

How to make the description field populate based on the name of Record Producer? 

HTML code-

<div class="record" style="margin-top:10px;" aria-hidden="true" ng-model="name">
Record producer:
<sn-record-picker id="name" field="name"
table="'sc_cat_item_producer'"
display-field="'name'"
value-field="'sys_id'"
search-fields="'name'"
default-query="'categoryISNOTEMPTY'"
page-size="100"
placeholder="${Select....}"
></sn-record-picker>
</div>

<div class="Description" style="margin-top:10px;" aria-hidden="true" ng-model="short_description" >
<label for=short_description>Subtopic Description:</label>
<textarea id="short_description" ng-model="short_description" placeholder="Select a record producer above to see description"></textarea>
</div>

[Ratnakar7 · Accepted solution]

Hi @Bhavani3 ,

You can use  $scope.$watch to watch for changes in the selected Record Producer name and then update the description accordingly. Here's an example of how you might structure your HTML and Client Script:

HTML :

<div class="record" style="margin-top:10px;" aria-hidden="true" ng-model="selectedRecordProducer">
    Record producer:
    <sn-record-picker id="name" field="selectedRecordProducer"
        table="'sc_cat_item_producer'"
        display-field="'name'"
        value-field="'sys_id'"
        search-fields="'name'"
        default-query="'categoryISNOTEMPTY'"
        page-size="100"
        placeholder="${Select....}">
    </sn-record-picker>
</div>

<div class="Description" style="margin-top:10px;" aria-hidden="true">
    <label for="short_description">Subtopic Description:</label>
    <textarea id="short_description" ng-model="short_description" placeholder="Select a record producer above to see description" readonly></textarea>
</div>

Client Controller:

function($scope) { 
    // Watch for changes in the selectedRecordProducer
    $scope.$watch('selectedRecordProducer', function (newValue, oldValue) {
        if (newValue) {
            // Assuming there's a way to fetch the description based on the selected record producer
            // You might need to make an additional API call to get the description
            var description = getDescriptionForRecordProducer(newValue);
            $scope.short_description = description;
        } else {
            // If no record producer is selected, clear the description
            $scope.short_description = "";
        }
    });

    // Function to fetch the description based on the selected record producer
    function getDescriptionForRecordProducer(recordProducerId) {
        // You may need to make an API call to get the description based on the record producer ID
        // Replace this with your actual API call
        // Example API call using $http:
        /*
        $http.get('/api/getDescription', { params: { recordProducerId: recordProducerId } })
            .then(function (response) {
                return response.data.description;
            })
            .catch(function (error) {
                console.error('Error fetching description:', error);
            });
        */
        // For now, returning a placeholder description
        return "Description for " + recordProducerId;
    }
}

This is a basic example, and you may need to adapt it based on your specific requirements.

Also, refer below similar community thread :
https://www.servicenow.com/community/developer-forum/onchange-widget/m-p/1778308

Thanks,

Ratnakar

[Bhavani3]

Hi @Ratnakar7 

I get an error in Short descriptions field as 

can help on this issue

[Ratnakar7]

Hi @Bhavani3 ,

It seems you setting object/array value to the short_description field, try with dot walking or JSON.stringify();

e.g.

 $scope.short_description = JSON.stringify(description);

Thanks,

Ratnakar