When enabling multiple dashboard panel instances the include script only works on one panel
Hi,
When I enable multiple instances true and add two panels on the dashboard then one panel is working fine but in the other one include script is not working Let me know how can include script work for all the panels which will be created in different multiple instances ids.
As Include Script load only once so we add the panel again then script wont work So how can we load script every time when panel added to the dashboard
Thanks
Anvita Rastogi
-
Hi Anvita,
If the examples sent previously have been changed to remove the onclick event from the checkbox list in the panel definition/shared element, in preference for programmatically adding a change event listener on page load, then this is why there is an issue. The addition of new panels happens via an Ajax Refresh so the programmatic event listener will not be run for any new branches of the DOM added this way. As you correctly say the page load script only runs once.
The simplest thing you can do is just add the event handler back to the shared element and just refer to the function defined in the include script - you can remove the piece of code that adds the change event to the checkbox lists if you do this.
If you'd still like to add the change events to the checkboxes programmatically then in addition to running this on page load, you will also need to add a refresh listener that calls the same function.
Please see the comments on this post to see a more complete explanation and a code snippet that will allow you to add the refresh listener: "Pre-Check Input Check Box List in a changing list?"
Regards
Glyn0 -
Hi Gyln,
So I tried Action Refresh and adding a pre-script to include the function in the subreport, but it still didn't work. Also, we can't add any refresh element listener in the panel
As we don't use any refresh element in the checkbox list we only added a condition in the subreport that if the value of the checkbox list then only that div content is visible.0 -
Hi Anvita,
I think you misunderstood, you should refer to the original example that works, it uses an Action JavaScript. Here it is again, however it calls the function in the include script instead
<?xml version="1.0" encoding="utf-8"?>
<Report ID="LogiForum.dashboard" SavedBy="LOGIXML\gmcKenna" SavedAt="2021-10-29 13:07:03" EngineVersion="12.8.724-SP2">
<SharedElement ID="input">
<InputCheckboxList OptionCaptionColumn="period" OptionValueColumn="period" ID="pPeriod_@Shared.InstanceID~" DefaultValue="@Request.cblPeriod~" MultiSelect="False">
<DataLayer Type="Static" ID="StaticOne" IdeDisplayStatus="Collapsed">
<StaticDataRow id="1" period="Weekly" />
<StaticDataRow id="2" period="Monthly" />
<StaticDataRow id="3" period="Yearly" />
<StaticDataRow id="4" period="Period To Date" />
<StaticDataRow id="5" period="Custom Dates" />
<DataLayerLink ID="dllStaticOne" />
</DataLayer>
<EventHandler DhtmlEvent="onchange">
<Action Type="Javascript" ID="actToggleShowMe" Javascript="showCustom("@Shared.InstanceID~");" />
</EventHandler>
</InputCheckboxList>
<Division ID="divCustom" HtmlDiv="True" IdeDisplayStatus="Collapsed">
<Division ID="showMe_@Shared.InstanceID~" HtmlDiv="True" ShowModes="None">
<HR />
<Division ID="divRow" Class="row px-5" HtmlDiv="True">
<Division ID="divColStart" HtmlDiv="True" Class="col">
<HtmlTag HtmlTagName="label" HtmlTagText="Start Date:" ID="lblStartDate">
<HtmlAttributeParams for="startDate" />
</HtmlTag>
<InputDate ID="startDate" DefaultValue="@Request.startDate~" Class="form-control" CalendarLinkType="None" />
</Division>
<Division ID="divColEnd" HtmlDiv="True" Class="col">
<HtmlTag HtmlTagName="label" HtmlTagText="End Date:" ID="lblEndDate">
<HtmlAttributeParams for="endDate" />
</HtmlTag>
<InputDate ID="endDate" DefaultValue="@Request.endDate~" Class="form-control" CalendarLinkType="None" />
</Division>
</Division>
</Division>
</Division>
</SharedElement>
<Body>
<Dashboard2 AllowFreeformLayout="False" DashboardAdjustable="True" DashboardColumns="3" ID="dash01" SaveFile="@Function.AppDownloadPath~\test01.xml">
<Panel Caption="Panel1" ID="pnl1" MultipleInstances="True" IdeDisplayStatus="Collapsed">
<PanelContent>
<Label Caption="Start Date: @Request.startDate~" />
<LineBreak />
<Label Caption="End Date: @Request.endDate~" />
</PanelContent>
<PanelParameters>
<IncludeSharedElement DefinitionFile="LogiForum.dashboard" SharedElementID="input">
<SharedElementParams InstanceID="@Function.InstanceID~" />
</IncludeSharedElement>
</PanelParameters>
</Panel>
<Panel Caption="Panel2" ID="pnl2" MultipleInstances="True" IdeDisplayStatus="Collapsed">
<PanelContent>
<Label Caption="Start Date: @Request.startDate~" />
<LineBreak />
<Label Caption="End Date: @Request.endDate~" />
</PanelContent>
<PanelParameters>
<IncludeSharedElement DefinitionFile="LogiForum.dashboard" SharedElementID="input">
<SharedElementParams InstanceID="@Function.InstanceID~" />
</IncludeSharedElement>
</PanelParameters>
</Panel>
</Dashboard2>
<IncludeScript IncludedScript="function showCustom( iguid ) {

 var arry = Array.from( document.querySelectorAll( "#pPeriod_" + iguid + " ul li" ) ); 
 var selval = arry.filter( e => e.firstChild.firstChild.checked === true );
 var showMe = document.getElementById( "showMe_" + iguid );
 if( selval.length > 0 ){
 selval = selval[0].innerText;
 selval === "Custom Dates"? showMe.style.display="block" : showMe.style.display="none";
 } else { showMe.style.display="none" }
}" />
</Body>
<ideTestParams cblPeriod="" startDate="" endDate="" />
</Report>0 -
Hi Glyn,
I think there is some confusion We have added a line chart that is having include some script to format the x-axis and y-axis in the subreport and we call that subreport in the panel content on the basis of the period selected from the checkbox list and what is happening now if we enable the multiple instances true then in the dashboard if we add same panels twice with different multiple instance-id then on the panel line chart include script is working fine but on the second panel the script is not loaded As I said earlier that script only load once so we add any panel twice with different instance-id the script is not working0 -
Hi Anvita,
It's not easy to imagine how a report definition is configured from a short description as there are many variables and many different ways to achieve the same goals. The best thing to do would be to post a sample report definition that demonstrates the same symptoms with sample static data. An alternative would be to speak with your Customer Account Manager about using some EOD time to help develop the feature you're having trouble with.
I still recommend that you read the comments on the post "Pre-Check Input Check Box List in a changing list?". It explains the reasons in some detail and also includes a JS code snippet that allows you to rerun any functions after an Ajax request completes
Best regards
Glyn0 -
Hi Glyn,
That would be great if I can speak with the Customer Account Manager as this is urgent and need to be fixed today. Let me know the procedure to speak with the Account Manager
or here are some more explanations on the issue if that could help you in understanding
Because the panel content contains have some include script, enabling multiple instances true will result in the creation of the same panel with different ids. As I previously stated, the included script in panel content only loads once, so if we add the same panel with a new instance id to the dashboard, the included script in panel content will not load.
Note:- The issue not relate with the checkboxes0 -
Just in case anyone else runs into a similar issue and comes across this thread, here is an update and some sample report definitions to see how it works...
Things to note, the sub-report is running in 'Embedded' mode - this means no iframe. The same can be achieved using a shared element or by adding charts directly to the panel definitions - the sub-report just matches Anvita's config but is not necessarily required. The panel instance id (@Function.InstanceID~) is used to make the Chart Canvas ID unique. This is important when adding your refresh listeners
Both a window 'load' event and an Ajax refresh listener ('reinitialize' event) are used to add the Chart API 'beforeCreateChart' events required to modify the chart options before it's rendered. Both bits of script are added at the parent report level as the sub-report is in 'Embedded' mode. The charts are selected into an array, which is iterated over to add the 'beforeCreateChart' listener for each individual chart panel instance.
The window 'load' event script will apply the chart updates on load, and the refresh listener will reapply the code after a new panel/instance is added or if panel parameters are edited. Below are some sample definitions, the first is for the main dashboard, the second is the sub-report
<?xml version="1.0" encoding="utf-8"?>
<Report ID="LogiForum.DashboardPanelChartEvent" SavedBy="LOGIXML\gmcKenna" SavedAt="2021-11-02 00:02:55" EngineVersion="12.8.724-SP2">
<SharedElement ID="input">
<InputCheckboxList OptionCaptionColumn="period" OptionValueColumn="period" ID="pPeriod_@Shared.InstanceID~" DefaultValue="@Request.cblPeriod~" MultiSelect="False" IdeDisplayStatus="Collapsed">
<DataLayer Type="Static" ID="StaticOne" IdeDisplayStatus="Collapsed">
<StaticDataRow id="1" period="Weekly" />
<StaticDataRow id="2" period="Monthly" />
<StaticDataRow id="3" period="Yearly" />
<StaticDataRow id="4" period="Period To Date" />
<StaticDataRow id="5" period="Custom Dates" />
<DataLayerLink ID="dllStaticOne" />
</DataLayer>
<EventHandler DhtmlEvent="onchange">
<Action Type="Javascript" ID="actToggleShowMe" Javascript="showCustom("@Shared.InstanceID~");" />
</EventHandler>
</InputCheckboxList>
<Division ID="divCustom" HtmlDiv="True" IdeDisplayStatus="Collapsed">
<Division ID="showMe_@Shared.InstanceID~" HtmlDiv="True" ShowModes="None">
<HR />
<Division ID="divRow" Class="row px-5" HtmlDiv="True">
<Division ID="divColStart" HtmlDiv="True" Class="col">
<HtmlTag HtmlTagName="label" HtmlTagText="Start Date:" ID="lblStartDate">
<HtmlAttributeParams for="startDate" />
</HtmlTag>
<InputDate ID="startDate" DefaultValue="@Request.startDate~" Class="form-control" CalendarLinkType="None" />
</Division>
<Division ID="divColEnd" HtmlDiv="True" Class="col">
<HtmlTag HtmlTagName="label" HtmlTagText="End Date:" ID="lblEndDate">
<HtmlAttributeParams for="endDate" />
</HtmlTag>
<InputDate ID="endDate" DefaultValue="@Request.endDate~" Class="form-control" CalendarLinkType="None" />
</Division>
</Division>
</Division>
</Division>
</SharedElement>
<Body>
<Dashboard2 AllowFreeformLayout="False" DashboardAdjustable="True" DashboardColumns="3" ID="dash01" SaveFile="@Function.AppDownloadPath~\test01.xml">
<Panel Caption="Panel1" ID="pnl1" MultipleInstances="True">
<PanelContent>
<IncludeFrame ID="subLineChart" SubReportMode="Embedded" Width="100" WidthScale="%">
<Target Type="IncludeFrameReport" ID="tgtLineChart" Report="LogiForum.DashboardPanelChartEventSub" />
<LinkParams startDate="@Request.startDate~" endDate="@Request.endDate~" InstanceID="@Function.InstanceID~" />
</IncludeFrame>
</PanelContent>
<PanelParameters>
<IncludeSharedElement DefinitionFile="LogiForum.DashboardPanelChartEvent" SharedElementID="input">
<SharedElementParams InstanceID="@Function.InstanceID~" />
</IncludeSharedElement>
</PanelParameters>
</Panel>
</Dashboard2>
<IncludeScript IncludedScript="function showCustom( iguid ) {

 var arry = Array.from( document.querySelectorAll( "#pPeriod_" + iguid + " ul li" ) ); 
 var selval = arry.filter( e => e.firstChild.firstChild.checked === true );
 var showMe = document.getElementById( "showMe_" + iguid );
 if( selval.length > 0 ){
 selval = selval[0].innerText;
 selval === "Custom Dates"? showMe.style.display="block" : showMe.style.display="none";
 } else { showMe.style.display="none" }
}

function setSeriesLegendIcon (e) {
 if (e.options.series == null) {
 return;
 }
 
 var xdata = e.options.series[0].data;
 e.options.series[0].data = [{x: 1, y: 1, marker: { enabled: false } }];
 e.options.series.push({ linkedTo: e.options.series[0].id, data: xdata });
 e.options.series[1].marker = { enabled: false };
}


window.addEventListener('load', function() {
 var charts = document.querySelectorAll("div[id^='line-chart']");
 if( charts ){
 charts.forEach( chart => {
 var myLineChart = Y.one('#' + chart.id);
 myLineChart.on('beforeCreateChart', function(e) {
 setSeriesLegendIcon(e);
 });
 });
 }
});

LogiXML.Ajax.AjaxTarget().on( 'reinitialize', function() {
 //GM – call your scripts to update the charts beneath this line
 var charts = document.querySelectorAll("div[id^='line-chart']");
 if( charts ){
 charts.forEach( chart => {
 var myLineChart = Y.one('#' + chart.id);
 myLineChart.on('beforeCreateChart', function(e) {
 setSeriesLegendIcon(e);
 });
 });
 }
});


" />
</Body>
<ideTestParams cblPeriod="" startDate="" endDate="" />
</Report><?xml version="1.0" encoding="utf-8"?>
<Report ID="LogiForum.DashboardPanelChartEventSub" SavedBy="LOGIXML\gmcKenna" SavedAt="2021-11-02 00:00:08" EngineVersion="12.8.724-SP2">
<Body>
<ChartCanvas ID="line-chart@Request.InstanceID~" IdeDisplayStatus="Collapsed">
<DataLayer Type="Static" ID="StaticDataLayer1" IdeDisplayStatus="Collapsed">
<StaticDataRow x="1" y="1" />
<StaticDataRow x="2" y="2" />
<StaticDataRow x="3" y="3" />
<StaticDataRow x="4" y="4" />
<StaticDataRow x="5" y="5" />
<StaticDataRow x="6" y="6" />
<StaticDataRow x="7" y="7" />
<StaticDataRow x="8" y="8" />
<StaticDataRow x="9" y="9" />
<StaticDataRow x="10" y="10" />
</DataLayer>
<Series Type="Line" ChartYDataColumn="y" ChartXDataColumn="x" ID="main" LegendLabel="Legend" ConnectNulls="True">
<MarkerPoints MarkerPointSymbol="https://www.highcharts.com/samples/graphics/sun.png" />
</Series>
</ChartCanvas>
<LineBreak />
<Label Caption="Start Date: @Request.startDate~" Format="Short Date" />
<LineBreak />
<Label Caption="End Date: @Request.endDate~" Format="Short Date" />
</Body>
<ideTestParams startDate="" endDate="" InstanceID="" />
</Report>0
Please sign in to leave a comment.
Comments
7 comments