I am trying to embed widget through HTML template and options are not correctly loaded into widget

[jordimsant]

I am trying to embed a widget via HTML template, but options seems not to be loading correctly. This is the code I'm using:

HTML:

<div class="container">
  <div class="section">
    <h2 class="section-header">Facturació</h2>
    <!-- CAMP PRINCIPAL-->
    <div class="form-group">   
      <label for="accions" class="control-label">Acció </label>
      <select id="opcions_accio" name="opcions_accio" ng-model="data.accio">  
        <option ng-repeat="item in data.accions" value="{{::item.value}}">
          {{item.label}}
        </option>
      </select>
    </div>
    <!-- LES MEVES VACANCES -->
    <div class="form-group">   
      <label for="accions" class="control-label">Les meves vacances </label>
      <widget id="report" options="data.options_mv"/>
    </div>
  </div>
</div>

Server Script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
  data.options_mv = {
		"report_id": {
			"value": "7b51e993878fde103235eacbbbbb3541",
			"displayValue": "My Holidays Calendar"
		},
		"show_title": {
			"value": "true",
			"displayValue": "true"
		}
	};
	
	data.accions = [
		{
			"label": "Veure les meves vacances",
			"value": 'vacances_meves'
		},
		{
			"label": "Veure les vacances de l'equip",
			"value": 'vacances_equip'
		},
		{
			"label": "Veure vacances d'un grup",
			"value": 'vacances_grup'
		},
		{
			"label": "Generar report personalitzat",
			"value": 'report_personalitzat'
		}
	];

})();

 Theoretically, I am passing this options just like it is mentioned in ServiceNow documentation, specifically in the article Embedded Widgets (and that's all what my script is doing, so I suppose no cross effect might be happening). Does anybody notice what am I doing wrong?

[Ankur Bawiskar]

@jordimsant 

try this

HTML:

<div class="container">
  <div class="section">
    <h2 class="section-header">Facturació</h2>
    <!-- CAMP PRINCIPAL-->
    <div class="form-group">   
      <label for="accions" class="control-label">Acció </label>
      <select id="opcions_accio" name="opcions_accio" ng-model="data.accio">  
        <option ng-repeat="item in data.accions" value="{{::item.value}}">
          {{item.label}}
        </option>
      </select>
    </div>
    <!-- LES MEVES VACANCES -->
    <div class="form-group">   
      <label for="accions" class="control-label">Les meves vacances </label>
      <sp-widget widget="report" options="data.options_mv"></sp-widget>
    </div>
  </div>
</div>

Server:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
  data.options_mv = {
    "report_id": {
      "value": "7b51e993878fde103235eacbbbbb3541",
      "displayValue": "My Holidays Calendar"
    },
    "show_title": {
      "value": "true",
      "displayValue": "true"
    }
  };
  
  data.accions = [
    {
      "label": "Veure les meves vacances",
      "value": 'vacances_meves'
    },
    {
      "label": "Veure les vacances de l'equip",
      "value": 'vacances_equip'
    },
    {
      "label": "Veure vacances d'un grup",
      "value": 'vacances_grup'
    },
    {
      "label": "Generar report personalitzat",
      "value": 'report_personalitzat'
    }
  ];

})();

If my response helped please mark it correct and close the thread so that it benefits future readers.

[jordimsant]

I have tried and it is still not working. However, now it doesn't say "Select a report in widget options!" as error message, now it simply does not return any error code. Any ideas on this?

[jordimsant · Accepted solution]

I have already find a solution here! My code has finally ended up like this:

HTML:

<div class="container">
  <div class="section">
    <h2 class="section-header">Facturació</h2>
    <!-- CAMP PRINCIPAL-->
    <div class="form-group">   
      <label for="accions" class="control-label">Acció </label>
      <select id="opcions_accio" name="opcions_accio" ng-model="data.accio">  
        <option ng-repeat="item in data.accions" value="{{::item.value}}">
          {{item.label}}
        </option>
      </select>
    </div>
    <!-- LES MEVES VACANCES -->
    <div class="form-group">   
      <label for="accions" class="control-label">Les meves vacances </label>
      <sp-widget widget="c.data.embeddedReport"></sp-widget>
    </div>
  </div>
</div>

Server Script:

(function() {
	var reportOptions = {
        report_id: "7b51e993878fde103235eacbbbbb3541",  // Report sys_id
        widget_parameters: '{"report_id":{"displayValue":"Report Title" }}'
    };
	data.embeddedReport = $sp.getWidget("report", reportOptions);
	
	data.accions = [
		{
			"label": "Veure les meves vacances",
			"value": 'vacances_meves'
		},
		{
			"label": "Veure les vacances de l'equip",
			"value": 'vacances_equip'
		},
		{
			"label": "Veure vacances d'un grup",
			"value": 'vacances_grup'
		},
		{
			"label": "Generar report personalitzat",
			"value": 'report_personalitzat'
		}
	];

})();

However, I do not understand where does this "widget_parameters" comes from, I cannot see it in report OOB Widget Options Schema. If anybody can enlighten us with an explanation of why is this working and not the previous codes I will be very pleased.