Navigation

drill

explore

HIPAA

transition

<p>The Accordion enables you to toggle between different sub-dashboards on demand by clicking an Indicator widget.</p>
<p>The Accordion add-on is useful for providing large amounts of information within a limited space.</p>


__pie-chart-2-image-unique-image-unique

__pie chart

accordian_thumb_0_300-image-unique

accordian_thumb_0_300

accordian1_thumb_0_300-image-unique

accordian1_thumb_0_300

2018-07-02_16h23_01-image-unique

2018-07-02_16h23_01

2018-07-02_17h06_54-image-unique

2018-07-02_17h06_54

<h4>To install the Accordion add-on:</h4>
<ol>
<li>Download the attachment.</li>
<li>Extract the .zip folder into the plugins folder: C:\Program Files\Sisense\app\plugins. If the folder does not exist, create it prior to extracting the .zip file.<b><br />
</b></li>
<li>After those files have been unzipped there, you may also have to restart the web server.</li>
<li>Create a dashboard that will be displayed as the sub-dashboard when using the Accordion widget. The dashboard name should start with the prefix ‘_accrd_’ for the dashboard to be hidden for non-dashboard-owner users from the Dashboards panel.</li>
<li>Open the Indicator widget’s script editor.<br />
<img decoding="async" loading="lazy" class="alignnone" src="https://cdn.sisense.com/wp-content/uploads/editscript_thumb_0_3001.png" alt="" width="329" height="257" /></li>
<li>In the Script Editor, paste the following code:<br />
<code>widget.on('ready', function(){<br />
Accordion({<br />
//default: true, // uncomment this to make accordion to open on start<br />
element: element,<br />
widget: widget,<br />
dashboard: dashboard,<br />
dashboardName: '_accrd_myDashboardName',<br />
dashboardFiltersSelection: [], // dashboard filters which should be passed to the target dashboard. For configuration please see section 'Configuration' point two.<br />
dashboardFiltersInheritance: false, //gives the possibility to apply all of the filters from the parent dashboard to the target dashboard<br />
widgetFiltersInheritance: false // set to true if you want to inherit the widget filters to the dashboard<br />
});<br />
})</code></li>
<li>Edit the script and define the values relevant for your use-case. You can modify the following objects:</li>
</ol>
<div class="table-responsive">
<table class="table table-bordered" style="float: left; border: 1px solid #000000;">
<thead>
<tr style="background: #cccccc; font-size: 80%;">
<td style="padding: 6px;"><strong>Parameter Name</strong></td>
<td style="padding: 6px;"><strong>Description</strong></td>
<td style="padding: 6px;"><strong>Types</strong></td>
<td style="padding: 6px;"><strong>Default Value</strong></td>
<td style="padding: 6px;"><strong>Accepted Values</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">default</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">Open or do not open accordion on start</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">boolean</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">false</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">true, false</td>
</tr>
<tr>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">element, widget, dashboard</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">Properties that can&#8217;t be changed</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">&#8211;</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">&#8211;</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">&#8211;</td>
</tr>
<tr>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">dashboardUrl</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">URL of the destination dashboard (can be used instead of dashboardName )</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">string</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">&#8216;http://localhost/app/main#/dashboards/&lt;YOUR_DASHBOARD_ID&gt;&#8217; &#8211; used as example</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">String with the link to the destination dashboard</td>
</tr>
<tr>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">dashboardName</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">Name of the destination dashboard (can be used instead of ‘dashboardUrl’ )</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">string</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">&#8216;_accrd_myDashboardName&#8217;- used as example</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">String with the name of the destination dashboard</td>
</tr>
<tr>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">dashboardFiltersSelection</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">Array of strings with the table name and field name of the filter</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">array</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">Empty array</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">array</td>
</tr>
<tr>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">dashboardFiltersInheritance</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">Enables you to apply all of the filters from the parent dashboard to the target dashboard</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">&gt;boolean</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">false</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">true, false</td>
</tr>
<tr>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">widgetFiltersInheritance</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">Inherit the widget filters in the dashboard</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">boolean</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">false</td>
<td style="vertical-align: top; font-size: 70%; padding: 6px;">true, false</td>
</tr>
</tbody>
</table>
</div>
<ol class="continue" start="8">
<li>In the Script Editor, click <strong>Save</strong> and refresh the widget to display the Accordion effect.</li>
</ol>


Leave Feedback