ServiceNow Assesment widget submit button

abhi56 · ‎12-24-2024

Hi i am woring on servcienow deault assessment widget submit button functionality i tried to get from where it is coming so i used inspect element and got some script but from where it is coming ,

bcz in the widget i am unable to find that

widget name :-Surveys and Assessments

when i am do inspect element i get :

<sp-assessment-layout form-model="formModel"><div ng-repeat="page in pages track by $index" ng-if="page.id == currentPage" class="m-b-lg ng-scope" style=""><div ng-if="hasPagination" ng-repeat="category in page.categories track by $index" class="asmt-modal-layout panel panel-default survey-intro-block ng-scope asmt-padding-xl" ng-class="{'asmt-padding-xl' : !isNative}"><sp-assessment-progress-bar ng-if="formModel.show_progress_bar && pages.length!=1" class="ng-scope"><div class="m-b-lg" style="margin-top:12px"><div class="assessment-progress inline m-b-none m-r progress ng-isolate-scope" title="66" style="width:100%" value="progress">
<div class="progress-bar" ng-class="type && 'progress-bar-' + type" role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" ng-style="{width: (percent < 100 ? percent : 100) + '%'}" aria-valuetext="66%" aria-labelledby="66" ng-transclude="" style="width: 66%;"></div>
</div><div id="66" class="ng-binding">66% complete</div></div></sp-assessment-progress-bar><div ng-if="!formModel.is_kiosk_survey || isMobile" class="category-container ng-scope"><div style="false" class="category-heading-section" ng-attr-style="{{(formModel.evaluation_method == 'assessment') && !isMobile && !isNative && 'padding: 0 10px;'}}"><div role="heading" style="margin-bottom:16px !important" ng-class="{'inline': !category.details || !page.showCategoryDetails, 'field-label': !isNative}" class="font-bold break-word ng-binding inline field-label" aria-level="2">Trade Assessment</div></div></div><div class="sp-form-field-parent asmt-margin-t-xl panel-top-border"><div ng-repeat="question in category.questions track by $index" class="asmt-question-border asmt-margin-t-xxl asmt-padding-t-xxl asmt-padding-l-r-md ng-scope" ng-if="checkQuestionVisibility(isMobile, formModel, question)"><div class="sp-asmt-auto-focus ng-isolate-scope" ng-if="renderFields" ng-class="{'text-center': formModel.is_kiosk_survey && !isNative}" form-model="formModel" field="formModel._fields[question]" glide-form="getGlideForm()" ng-show="checkQuestionVisibility(isMobile, formModel, question)" is-mobile="isMobile" is-native="isNative" aria-hidden="false"><div ng-if="!c.renderSPFormField(field)" class="form-group ng-scope" ng-class="{'survey-question': !isMobile && !formModel.is_kiosk_survey}"><div class="wrap-label-text ng-scope" ng-if="::c.showLabel(field)" ng-class="{'m-b-sm': isNative}"><label class="field-label label-override" for="sp_formfield_308bc11a87e696d0dab7ebd30cbb35cd"><span class="field-decorations"><span ng-show="field.mandatory" style="padding-right: 0.25em;" class="fa fa-asterisk mandatory mandatory-filled" ng-class="{'mandatory-filled': field.mandatory_filled()}" title="Required" aria-label="Required Filled " role="img" aria-hidden="false"></span></span><span ng-attr-title="{{::accessible ? undefined : field.hint}}" data-placement="right" data-toggle="tooltip" class="ng-binding" data-original-title="" title="">Does technology OR Data fall under 500-600 range or military or defence department data or ITAR defined trade classificated ?</span></label></div><span class="type-template field-actual state-mandatory" ng-switch="::field.type" ng-class="{'state-mandatory': field.mandatory, 'state-readonly': field.read_only, 'state-hidden': field.hidden, 'has-error': field.isInvalid}"><span ng-switch-when="template" class="ng-scope"><sp-assessment-mobile-field ng-if="!field.template.allow_image && isMobile" class="ng-scope"><fieldset><legend class="sr-only"><span ng-if="field.isMandatory() && field.mandatory_filled()" class="ng-scope" style="">Required filled -</span><span class="ng-binding">Does technology OR Data fall under 500-600 range or military or defence department data or ITAR defined trade classificated ?</span></legend><div ng-repeat="c in field.choices track by $index" class="wrapper-xs ng-scope" ng-class="{'m-l' : isNative}"><button class="btn btn-block btn-default" elem-id="sp-asmt-mobile-595488088742561074b385130cbb35b2" ng-click="fieldValueChanged(c.value)" aria-pressed="false" ng-class="{'btn-primary' : field.value == c.value, 'btn-default' : field.value != c.value, 'asmt-primary-btn-disabled': field.isReadonly() && c.value == field.value}" ng-disabled="field.isReadonly()" aria-label="66% complete Trade Assessment Does technology OR Data fall under 500-600 range or military or defence department data or ITAR defined trade classificated ?
Required -Does technology OR Data fall under 500-600 range or military or defence department data or ITAR defined trade classificated ?
Yes
No"><span style="white-space: normal" class="ng-binding">Yes</span></button></div><div ng-repeat="c in field.choices track by $index" class="wrapper-xs ng-scope" ng-class="{'m-l' : isNative}"><button class="btn btn-block btn-primary" elem-id="sp-asmt-mobile-126448088742561074b385130cbb354a" ng-click="fieldValueChanged(c.value)" aria-pressed="true" ng-class="{'btn-primary' : field.value == c.value, 'btn-default' : field.value != c.value, 'asmt-primary-btn-disabled': field.isReadonly() && c.value == field.value}" ng-disabled="field.isReadonly()" style=""><span style="white-space: normal" class="ng-binding">No</span></button></div></fieldset></sp-assessment-mobile-field></span></span></div></div></div></div><sp-assessment-nav-buttons ng-if="(!formModel.is_kiosk_survey || isMobile) && !isNative" class="ng-scope"><div style="margin-top: 3.2rem;" ng-class="{'container-fluid': !isMobile, 'asmt-sticky-buttons': formModel.actions_footer}" ng-attr-style="{{hasPagination && 'margin-top: 3.2rem;'}}"><div class="visible-xs asmt-border-top" style="overflow:hidden;" ng-class="{'asmt-border-top': hasPagination}"><div class="text-center" style="padding:24px 0px"><span aria-hidden="true" class="ng-binding">3/3</span><span class="sr-only ng-binding">Page 3 of 3}</span></div><button ng-disabled="isSavingOrSubmitting()" class="btn btn-default" style="float:left;width:48%" ng-click="navigatePage('previous')" ng-show="currentPage != 0 && hasPagination" aria-hidden="false">Previous123</button><button ng-disabled="isSavingOrSubmitting()" class="btn btn-primary ng-hide" style="float:right;width:48%" ng-click="validatePageAndSave('next')" ng-show="currentPage != pages.length - 1 && hasPagination" aria-hidden="true">Next</button><button ng-disabled="isSavingOrSubmitting()" class="btn btn-primary ng-binding" style="float:right;width:48%" ng-click="validatePageAndSave('submit')" ng-show="currentPage == pages.length-1 && !formModel.readonly_form" aria-hidden="false">Submit</button></div></div></sp-assessment-nav-buttons></div></div></sp-assessment-layout>

I can see that submit button is defined here in the inspect element but from where it is coming :</sp-assessment-nav-buttons>

<button ng-disabled="isSavingOrSubmitting()" class="btn btn-primary ng-binding" style="float:right;width:48%" ng-click="validatePageAndSave('submit')" ng-show="currentPage == pages.length-1 && !formModel.readonly_form" aria-hidden="false">Submit</button></div></div></sp-assessment-nav-buttons>

Community Alums · ‎12-25-2024

hi @abhi56 ,

try with this code

<div ng-if="data.formModel">
  <sp-assessment-layout form-model="data.formModel">
    <sp-assessment-nav-buttons></sp-assessment-nav-buttons>
  </sp-assessment-layout>
</div>
<div class="form-group">
  <button class="btn btn-primary" ng-click="c.submitAssessment()">Submit</button>
</div>

(function () {
  /* populate the 'data' object */
  /* e.g., data.greeting = 'hello'; */

  api.controller = function ($scope, $http) {
    $scope.c.submitAssessment = function () {
      $http
        .post('/api/now/v1/submit_assessment', $scope.data.formModel)
        .then(
          function (response) {
            alert('Assessment submitted successfully!');
          },
          function (error) {
            console.error('Error submitting assessment:', error);
          }
        );
    };
  };
})();

(function executeRule() {
  // Server-side logic to fetch the assessment form model
  var gr = new GlideRecord('asmt_assessment_instance');
  if (gr.get('sys_id', input.assessmentId)) {
    data.formModel = gr;
  }
})();

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

Community Alums · ‎12-25-2024

Hi @abhi56 ,

The error likely arises because the "Surveys and Assessments" widget uses ServiceNow's internal directives (<sp-assessment-layout> and <sp-assessment-nav-buttons>), which are tied to specific backend logic and AngularJS controllers that handle form rendering, navigation, and submission. If you attempt to add a custom submit button or override its behavior without understanding these dependencies, you might encounter issues like undefined objects, invalid API calls, or AngularJS binding errors.

To resolve the issue, you must carefully integrate with the widget's existing AngularJS scope and ensure that the correct backend methods are called. Below is a corrected approach to add a custom submit button that triggers the assessment submission: