Embedding widget with options

yundlu316
Kilo Guru

Hi Experts,

I'm trying to embed the chartjs-report widget found in the share site (ServiceNow Share ), but am running into issues with the options.   When using chartjs widget on its own, the user has the ability to edit the title, report, report type, etc. in the Designer view:

find_real_file.png

However, when this widget is embedded in another widget, the ability to input options like above seems to go away.   Based on the ServiceNow docs I've read, it looks like options need to be declared in the backend server script, but I'm not sure how to do that correctly (sorry, new to angular).   If I'm following the syntax correctly, the HTML seems easy enough:

<sp-widget id="chartjs-report" options='data.chartOptions'></sp-widget>

But customizing the server script is a bit confusing for me:

(function() {
  data
.chartOptions = {"u_type": "Donut",

                                                                    "title": "Headcount Chart",

                                                                    "u_report": "active_headcount"};
})();

The above code doesn't work and I'm wondering if my chartOptions are correct.   I got u_type and u_report by opening the above option screen in platform and then right clicking on the Report Type and Report fields to get their names.   What am I doing wrong here?

Thanks!

3 REPLIES 3

Community Alums
Not applicable

This may help, depending on exactly what you're trying to do. I wanted to set the options on the embedded widget based on options I added to the "parent" widget.



I had to use client script in my embedded widget to get options from the parent:



find_real_file.png



If you're just talking about setting the options in the server script, like hardcoding them, it just looks like this:



options.title = "title";



options.short_description = "description";



If you've got values stored in the data object somewhere you could also do this (also in the server script)



options.title = data.name;


options.short_description = data.tagline;



etc, etc.


Thanks Andrew!   I just tried options.title = "title"; as you indicated, but it doesn't work.   Am I supposed to include that in data.chartOptions?   Like this...



data.chartOptions = {options.title = "title"};




Community Alums
Not applicable

That was just a generic example, you'll need to look at your widgets' Option Schema to know what the actual name of your widget's options are.



find_real_file.png



in the above example, the syntax would be:



options.max_group



and I'm not familiar with the syntax you're using in your example. I've never done it that way.