Hi everyone,
Here's an example of a modification of two baseline widgets: "Data Table from Instance Definition" and "Data Table". Data Table from Instance Definition is an extension for Data table, with that I mean that it utilizes the Data Table widget as a base and then adds a few more features.
The Data Table from Instance Definition widget without modifications looks like this:
We will add a keyword search and an option to select a view instead of specifying fields. It will look like this:
Here's how it's done:
1. Check options in the Data Table widget Client Script. There are 2 options that we are interested in, that are not used in the Data Table from Instance Definition widget: show_keywords and view.
2. Clone the Data Table from Instance Definition widget. I called it "List with Keyword Search". Name/Id is not important.
3. In the Server Script, scroll down to the bottom and look at the "widgetParams" object:
var widgetParams = {
table: data.table,
fields: data.field_list,
o: data.o,
d: data.d,
filter: data.filter,
window_size: data.window_size,
view: options.view,
title: options.title,
show_breadcrumbs: true,
show_keywords: true
};
data.dataTableWidget = $sp.getWidget('widget-data-table-with-search', widgetParams);
- Notice that we are changing/adding three things: view, show_keywords and data.dataTableWidget.
- view: options.view removes the hard-coding of the view (it was 'sp' before) and makes it get the view from options instead.
- show_breadcrumbs: true adds the option as we saw it in the Data Table widget.
- data.dataTableWidget = $sp.getWidget('widget-data-table-with-search', widgetParams); here we change the referenced widget id to match our future cloned widget. We will create it in the next step.
4. Clone the Data Table widget. I called it Data Table with Search. It must have the same ID as we set above: widget-data-table-with-search.
5. In the Server Script, at the top, add some handling of the view option:
(function() {
if (!input) // asynch load list
return;
data.title = options.title || input.title;
data.view = options.view || input.view;
- data.view = options.view || input.view; gets the value from the option and makes it usable in the widget. Notice how it is handled in the same way as the title, which is also an option.
6. Go to the Designer and add the first widget we created, List with Keyword Search, to a page. hover over the new Widget Instance and press the pen (edit). Enter for example "incident" in the Table field.
7. Now we need to add the View option to the widget. The widget that we cloned had an options table already so for simplicity we will just add an option through JSON.
- In the Designer, Add this into the "Additional options, JSON format" field:
{
"view": {
"value": "ess"
}
}
8. Try it out!
Good luck implementing in your own instances.
Best Regards,
Miriam
