asked on May 9, 2023
I am getting console error while full screen functionality also back to minimize report.
and some time its stuck with partial full screen.
I have attached 3 screenshot of 1) Full Screen error, 2) Minimize Screen error and 3) Screen stuck with partial full screen.
Please help me to resolve this issue.
⋅ May 10, 2023
Hello, Kapil!
Thank you for your question.
Based on our previous experience, we assume that the HTTP Feature-Policy header may cause an issue with the fullscreen. The fullscreen directive of this header controls whether the current document is allowed to use Element.requestFullscreen(). To resolve this, we suggest checking the headers sent from your server and ensuring that fullscreen is allowed with the following configuration:
Feature-Policy: fullscreen 'self'
This header should be set up on your server (e.g. Apache, express.js, etc.).
Please let us know if our recommendation helped you.
Best Regards,
Maksym
⋅ May 12, 2023
I have tried above solution but no luck
⋅ May 15, 2023
Hi, Kapil!
Thank you for your reply.
We are still unable to reproduce this fullscreen behavior on our end. Could you please provide us with a sample project where this issue can be reproduced? This will greatly help us to find the cause of this issue.
Looking forward to hearing from you.
Best Regards,
Maksym
⋅ May 25, 2023
Hi, Kapil!
Hope you are doing well.
We are wondering if you have any progress on the issue with full-screen functionality.
Please let us know if further assistance is needed.
Best Regards,
Maksym
⋅ May 30, 2023
Still facing issue with Full screen, bellow "customizeToolbar" function being used to setup "Fullscreen" functionality.
function customizeToolbar(toolbar) {
var tabs = toolbar.getTabs();
toolbar.getTabs = function () {
var tabs = [
{
title: "Fullscreen",
id: "fm-tab-newtab",
handler: this.fullscreenHandler,
mobile: false,
//icon: '<div style="color:#FFCC00;" class="iconnew-survey-concept-screening pivot-toolbar-icon" ></div>',
icon: this.icons.fullscreen,
rightGroup: true
}
];
return tabs;
}
}
⋅ May 31, 2023
Hello, Kapil!
Thank you for sharing this code snippet with us. It helped us to discover the possible reason behind the full-screen error. The default fullscreen handler relies on the default tab's id, and we suggest using the default tab's id: fm-tab-fullscreen. In case you only need to change the icon without modifying any logic, we recommend simply changing the toolbar.icons.fullscreen property, as shown in this example: https://jsfiddle.net/flexmonster/cjerd387/
Please let us know if our answer helped you.
Best Regards,
Maksym
⋅ June 5, 2023
I am giving you exact function of customizeToolbar, please take a look and let me know if any changes required.
// customizeToolbar code
function customizeToolbar(toolbar) {
var tabs = toolbar.getTabs();
toolbar.getTabs = function () {
var tabs = [
{
id: "fm-tab-expandcollapsetab",
title: "Expand",
icon: this.icons.open,
menu: [{
id: "fm-tab-expandtab",
title: "Expand",
handler: function () { $scope.dynamicSummary.expandAllData(); }
},
{
id: "fm-tab-collapsetab",
title: "Collapse",
handler: function () { $scope.dynamicSummary.collapseAllData(); }
}
]
},
{
title: "Export",
id: "fm-tab-newtab",
mobile: false,
icon: this.icons.export,
menu: [
{
title: "Excel",
id: "fm-tab-export-excel",
handler: function () { $scope.exportDS('excel'); },
args: "excel",
icon: this.icons.export_excel
},
{
title: "Pdf",
id: "fm-tab-export-pdf",
handler: function () { $scope.setExportTitle('pdf'); },
args: "pdf",
icon: this.icons.export_pdf
},
]
},
{
divider: true
},
{
title: "Grid",
id: "fm-tab-newtab",
handler: this.gridHandler,
icon: this.icons.grid
},
{
title: "Chart",
id: "fm-tab-newtab",
onShowHandler: this.checkChartMultipleMeasures,
icon: this.icons.charts,
menu: [{
title: "Column",
id: "fm-tab-charts-column",
handler: this.chartsHandler,
args: "column",
icon: this.icons.charts
},
{
title: "Bar horizontal",
id: "fm-tab-charts-bar-horizontal",
handler: this.chartsHandler,
args: "bar_h",
icon: this.icons.charts_bar
},
{
title: "Line",
id: "fm-tab-charts-line",
handler: this.chartsHandler,
args: "line",
icon: this.icons.charts_line
},
{
title: "Scatter",
id: "fm-tab-charts-scatter",
handler: this.chartsHandler,
args: "scatter",
icon: this.icons.charts_scatter
},
{
title: "Pie",
id: "fm-tab-charts-pie",
handler: this.chartsHandler,
args: "pie",
icon: this.icons.charts_pie
},
{
title: "Stacked column",
id: "fm-tab-charts-stacked-column",
handler: this.chartsHandler,
args: "stacked_column",
flat: false,
icon: this.icons.charts_stacked_column
},
{
title: "Column line",
id: "fm-tab-charts-column-line",
handler: this.chartsHandler,
args: "column_line",
icon: this.icons.charts_column_line
},
{
title: "Multiple",
id: "fm-tab-charts-multiple",
handler: this.chartsMultipleHandler,
flat: false,
mobile: false,
type: "checkbox"
}
]
},
{
title: "Format",
id: "fm-tab-newtab",
icon: this.icons.format,
rightGroup: true,
menu: [{
title: "Format cells",
id: "fm-tab-format-cells",
handler: this.formatCellsHandler,
icon: this.icons.format_number
},
{
title: "Conditional formatting",
id: "fm-tab-format-conditional",
handler: this.conditionalFormattingHandler,
icon: this.icons.format_conditional
}
]
},
{
title: "Options",
id: "fm-tab-newtab",
handler: this.optionsHandler,
icon: this.icons.options,
rightGroup: true
},
{
title: "Fields",
id: "fm-tab-newtab",
handler: this.fieldsHandler,
icon: this.icons.fields,
rightGroup: true
},
{
divider: true,
rightGroup: true
}
,
{
title: "Fullscreen",
id: "fm-tab-newtab",
handler: this.fullscreenHandler,
mobile: false,
icon: this.icons.fullscreen,
rightGroup: true
}
];
return tabs;
}
}
⋅ June 6, 2023
Hi, Kapil!
We have looked through the provided code.
To fix the fullscreen error, we suggest changing the id property of the fullscreen tab (last object in the tabs array) to fm-tab-fullscreen.
Please let us know if this helped you.
Best Regards,
Maksym
⋅ June 6, 2023
Thanks for your help
