Wyn Enterprise application provides you with the ability to customize the dashboard designer and viewer. The customization is used to enable flexible embedding of the dashboard designer and viewer into your application to meet business needs. Follow the below instructions to customize the dashboard viewer and designer for your application,

To hide Designer Toolbar when launching designer

Add the following code in app.js file with a new option toolbar while creating the designer instance to control the toolbar visibility,

const designer = WynBi.create("DashboardDesigner", {
    baseUrl: baseUrl,
    token: token,
});
designer.initialize({
    container: document.querySelector("#dashboard"),
    defaults: {
       datasetId: datasetId,
    },
    features: {
        toolbar: 'show' | 'hide',
    },
});

Note the following for the above designer integration,

1. The following options will not be available on the UI: Undo, Redo, Save, Preview, Document Settings, Setting, Databinding, Help, and Close.

2. If the toolbar: 'show' | 'hide' option is not specified, the default value will be show.

3. When the designer toolbar is hidden, the Inspector and Data Binding panels will also be hidden.

4. With the designer toolbar hidden, you can switch to preview using the preview command. However, the toolbar will still be hidden.

To hide Inspector Panel when launching the Designer

Add the following code in app.js file with a new option showInspector while creating the designer instance to control the visibility of the Inspector Panel,

const designer = WynBi.create("DashboardDesigner", {
    baseUrl: { baseUrl },
    token: { token },
});
designer.initialize({
    container: document.querySelector("#dashboard"),
    defaults: {
       datasetId: datasetId,
    },
    features: {
       showInspector: true | false,
    },
});

Note the following for the above designer integration,

1. If the showInspector: 'true' | 'false' option is not specified, the default value will be true.

2. With the Inspector Panel hidden, the settings icon will also be hidden, and clicking on the blank designer area will not open the Inspector Panel.

To hide the Data Binding panel

Add the following code in app.js file with a new option showDataBindingPanel while creating the designer instance to control the visibility of the Data Binding panel,

const designer = WynBi.create("DashboardDesigner", {
    baseUrl: baseUrl,
    token: token,
});
designer.initialize({
    container: document.querySelector("#dashboard"),
    defaults: {
       datasetId: datasetId,
    },
    features: {
       showDataBindingPanel: true | false,
    },
});

Note the following for the above designer integration,

1. If the showIDataBindingPanel: 'true' | 'false' option is not specified, the default value will be true.

2. When the showIDataBindingPanel option is false, the database icon in the toolbar will be hidden.

3. When the showIDataBindingPanel option is false and a new scenario is dragged onto the designer area, the Data Binding panel will not appear.

4. You can still select a dataset for Global Filter, Parameters, and Rich Text.

To hide Data Selector in Data Binding Panel

Add the following code in app.js file with a new option disableChangeDataset while creating the designer instance to control the ability to select the binding dataset to scenario,

const designer = WynBi.create("DashboardDesigner", {
    baseUrl: baseUrl,
    token: token,
});
designer.initialize({
    container: document.querySelector("#dashboard"),
    defaults: {
       datasetId: datasetId,
    },
    features: {
       disableChangeDataset: true | false,
    },
});

Note: If the disableChangeDataset: 'true' | 'false' option is not specified, the default value will be false. And, when the disableChangeDataset option is true, the dataset selector will be disabled.

To customize the Toolbox item categories

Add the following code in app.js file with a new option componentCategories while creating the designer instance to control the availability of the component categories.

const designer = WynBi.create("DashboardDesigner", {
    baseUrl: baseUrl,
    token: token,
});
designer.initialize({
    container: document.querySelector("#dashboard"),
    defaults: {
       datasetId: datasetId,
    },
    features: {
        componentCategories: [
            'charts',
            'visual',
            'slicers',
            'gallery',
       ],
    },
});

Following componentCategories can be used to control the visibility - charts, visuals, components, slicers, gallery, and wizard.

Note the following for the above design integration,

1. If the componentCategories option is not specified, the default value will be All.

2. When the componentCategories list is an empty array, the toolbar will be hidden.

3. The above configuration changes override the admin settings options and the settings are returned to the user interface by API configuration.

To customize the Action Bar items

Add the following code in app.js file with a new option actionbarItems while creating the designer instance to control the visibility of the Action Bar components.

const designer = WynBi.create("DashboardDesigner", {
    lng: 'zh',
    baseUrl: { baseUrl },
    token: { token },
});
designer.initialize({
    container: document.querySelector("#dashboard"),
    defaults: {
       datasetId: datasetId,
    },
    features: {
        actionbarItems : [
            "focus",
            "annotation",
            "shareScenario"
        ],
    },
});

Following actionbarItems can be used to control the visibility - filter, sort, rank, modelParameters, convertVisual, edit, focus, showData, export, annotation, remove, clearCustomData, cleanSliceFilter, clearRuntimeFilter, shareScenario, openFullDashboard, clearSelection, analysisPath, mergeDatasets, contentSetting, backgroundImageID, conditionalFormat, editorLayout, expand, expand, floorPlanId, mapInfo, referenceLine, trendLines.

Following calcChartActionBarItems can be used to control the visibility - addPivotTable, enterEditing, exitEditing, exitEditing, removePivotTable, setDataSourceRange, showDataSourceRange.

Following internalActionBarItems can be used to control the visibility - _swapRowsAndCols, _slicerSearch, _slicerSort, _slicerSelectParameter, _editWebContent, _cleanCustomDataForTable.

Note: If the internalActionBarItems option is not specified, the default value will be nofilter and custom settings will not be supported.

To hide the Close button when launching designer

Add the following code in app.js file with a new option showCloseButton while creating the designer instance to control the visibility of the Close button.

const designer = WynBi.create("DashboardDesigner", {
    baseUrl: baseUrl,
    token: token,
});
designer.initialize({
    container: document.querySelector("#dashboard"),
    defaults: {
       datasetId: datasetId,
    },
    features: {
       showCloseButton: true | false,
    },
 
});

Note: If the showCloseButton option is not specified, the default value will be true.

To hide the Help & Support option

Add the following code in app.js file with a new option showHelpButton while creating the designer instance to control the visibility of the Help button.

const designer = WynBi.create("DashboardDesigner", {
    baseUrl: baseUrl,
    token: token,
});
designer.initialize({
    container: document.querySelector("#dashboard"),
    defaults: {
       datasetId: datasetId,
    },
    features: {
       showHelpButton: true | false,
    },
 
});

To hide the Mobile Designer button

Add the following code in app.js file with a new option showMobileDesigner while creating the designer instance to control the visibility of the Mobile Designer button.

const designer = WynBi.create("DashboardDesigner", {
    baseUrl: baseUrl,
    token: token,
});
designer.initialize({
    container: document.querySelector("#dashboard"),
    defaults: {
       datasetId: datasetId,
    },
    features: {
       showMobileDesigner: true | false,
    },
 
});

Note: In case, the showMobileDesigner option is not specified, the default value will be true.

To provide TogglePreview API

Add the following method in the designer instance,

public togglePreview
({
    syncChanges?: boolean;
})

Add the following code in app.js file with a new option showMobileDesigner while creating the designer instance to control the visibility of the Mobile Designer button.

const designer = WynBi.create("DashboardDesigner", {
    baseUrl: { baseUrl },
    token: { token },
});
designer.initialize({
    container: document.querySelector("#dashboard"),
});
 
designer.togglePreview();

Note the following for the above integration,

1. In case the designer is in the design view, the TogglePreview command will make the designer navigate to the preview mode. And, when the designer is in the preview mode, the TogglePreview command will make the designer navigate to the design mode which same as clicking the Back button in preview mode.

2. In case there are some state-level changes in the preview mode, calling the TogglePreview command will open up the sync dialog. If the sync dialog is not required, you can control the synchronization logic through syncChanges.

To provide Save API to save current document

Add the following method in the designer instance to allow users to save the current document to the server,

public save({
  name?: string;
  comment?: string;
  categories?: Array<string>;
  shouldPublish?: boolean;
}) => Promise

designer.save({
        name: 'xxx',
        categories: ['xx'],
        comment: 'xx',
        shouldPublish: false
})

Note the following for the above integration,

1. For a new document, the name of the document is mandatory.

2. When editing the document, name, and category fields will be ignored.

3. In case the user does not have write permission for the document, the Save method will return an error.

4. When the payload is not defined, the save dashboard dialog will be shown to the users.

To provide Show/HideDataBindingPanel API

Use the following methods in the designer instance to show or hide the Data Binding Panel.

public showDataBindingPanel()
 
public hideDataBindingPanel()
 
public showInspector()
 
public hideInspector()

To provide add new scenario API

Add the following method to the designer instance to allow users to add a new scenario to the current document,

addVisual: (
    visualName: string,
    width?: string,
    height?: string,
    left?: string,
    top?: number,
) => Promise<string>
 
designer.addVisual('column', 400, 300, 0, 0);

Note the following for the above design integration,

1. If the overlap is not enabled in the designer instance and a scenario is overlapping with an existing scenario, the dimensions of the scenario will be adjusted to the width and height of the dashboard.

2. If the scenario to be added cannot be found, no scenario will be added to the dashboard.

To provide set dataset ID API

Add the following method to the designer instance to allow users to set the dataset id to the current scenario,

setDatasetId: (datasetId: string) => void;
 
designer.setDatasetId('xxxx-xxxx-xxxx')

Note that the following chart types do not support using the setDatasetID API,

Spread Chart,Merged Chart, Card Chart, Rich Editor, Container, TabContainer, Embedded Dashboard, Embedded Report.

To provide dashboard event subscribe/unsubscribe API

Add the following method to the designer instance to enable the dashboard subscribe/unsubscribe event,

on: (eventType: DesignerEventType, eventHandler: (...args) => void) => void;
off: (eventType: DesignerEventType, eventHandler: (...args) => void) => void;
 
designer.on('viewChanged', (view) => {
    console.log(view);
});

The following table lists all the available options in the constructor and initialize method for customization of the dashboard designer and viewer,