How do I display g_form Values on the Body HTML template in the Widget?

[Ccart]

I have some HTML code that is in a hidden dev until a checkbox is checked. Once it is checked, I want to display this g_form value: u_reporting. I have been looking at this for days and I am completely stuck. My code looks like this:

HTML:

... 
<!--Services CHK-->
    <div id='Services_chk' class="row" ng-show="fields.request_type != ''">
        <div class="col-sm-12">
            <h4 class="bb-solid">
                <div class="text-danger" style="float:right;font-size:1.2rem;font-weight: bold">You must select at
                    least
                    one service</div>
                Services:
            </h4>
            <div>
                <div>
                    <div>
                        {{c.service}}
                    </div>
                </div>
            </div>
        </div>
    </div>

Client Script:

function($scope, $rootScope, $uibModal) {
    var c = this;
    var g_form = $scope.page.g_form;
   
        //var reportingData = g_form.getValue('u_reporting');
        c.service = "TEST!";
...
}

Please help, thanks!

[Musab Rasheed]

Hi,

Check this out

https://community.servicenow.com/community?id=community_question&sys_id=7fef3419db057f8014d6fb2439961971

[Markus Kraus]

add this to the client controller of your widget:

// set the default value of the custom-variable
c.service = g_form.getValue($scope.page.field.variable_name);

// whenever a client script uses g_form.setValue('<custom-variable-name>', 'NEWVALUE')
// is beeing called,the $watch will copy the new value to c.service
$scope.$watch('page.field.value', function (newValue, oldValue, scope) {
    c.service = newValue;
});

Then add a client script to the catalog item which runs "onChange" of "u_reporting":

function onChange(control, oldValue, newValue, isLoading) {
   if (isLoading || newValue == '') {
      return;
   }

   g_form.setValue('variable_name_variable_with_widget_from_above', 'NEW SERVICE NAME');
}