Dashboard Controller

Toolbar Api

The toolbar api helps to add/remove buttons and groups to the app toolbar or dashboard toolbar. You can control the the visibility of a button/group with the displayCondition. You can control the appearance of a button with the displayTransformation.

See the fully working example below.

How to catch an event

Custom buttons will emit in event into the App or Dashboard Event Bus, depending on the location. You can add an action script that is listening to the id of the button.

Be aware to select the correct event bus.

• Location: App Toolbar -> Use App Event Bus. (deprecated, not allowed)
• Location: Dashboard Toolbar -> Use Dashboard Event Bus.

Only Dashboard Toolbar Manipulation is allowed. No custom Actions or Groups can be rendered in App Toolbar anymore.

⚙️ Explaination of Variables

Example - Add a group and button, control the state

Copy following example into a dashboard pre execution script. It will render a button and make it blink for several seconds. The example shows how to control the state of the button with a Behavior Subject and also with a local variable.

// App
// const { event: appEvent, env: appEnv } = fyzApp;
// Dashboard
const { event: dashboardEvent, env: dashboardEnv } = fyzDashboard;
const { toolbarApi } = fyzDashboard.controller;

console.log("Start Dashboard.");

const buttonStateSubject$ = new rxjs.BehaviorSubject({
    state: 'transparent'
})

toolbarApi.applyToolbarContext(buttonStateSubject$);

const myGroup = {
    group: {
        id: 'my-app-group',
        orderId: -1,
        buttons: [],
    },
    displayCondition: (context) => {
        return true;
    },
};

let localState = {
    state: 'transparent'
}

const myButton = {
    button: {
        id: 'my-button',
        state: 'transparent',
        stateStyles: {
            default: {
                backgroundColor: 'var(--system-tint)',
                fill: 'var(--system-label)',
                color: 'var(--system-label)',
            },
            hover: {
                backgroundColor: 'transparent',
                fill: 'var(--system-tint)',
                color: 'var(--system-tint)',
            },
        },
        buttonBaseStyles: {
            padding: '0 3px',
        },
        buttonStyles: {
            padding: '0 3px',
        },
        tooltip: 'Test',
        prefixIcon: {
            iconName: 'add',
            iconGroup: 'fyz-icons/general-icons',
            inheritColorFromState: true,
            show: true,
            iconConfig: {
                size: 16,
            },
        },
    },
    orderId: 60,
    groupId: 'my-app-group',
    displayCondition: (context) => {
        return true;
    },
    displayTransformation: (button, context) => {
        if (localState) {
            return fyzUtils.mergeDeep(button, { state: localState.state });
        } else {
            return fyzUtils.mergeDeep(button, { state: context.state });
        }

    }
}


toolbarApi.registerGroup(myGroup)
toolbarApi.registerButton(myButton);

setTimeout(x => {
    localState = {
        state: 'default'
    }

    console.log("Render");
    toolbarApi.render();

}, 1000)

setTimeout(x => {
     localState = undefined;
    console.log("Updateing Context");
    buttonStateSubject$.next({
        state: 'transparent'
    })
}, 5000);

setTimeout(x => {
    buttonStateSubject$.next({
        state: 'default'
    })
}, 6000);


setTimeout(x => {
    toolbarApi.removeButton('my-button');
}, 7000)

setTimeout(x => {
    toolbarApi.removeGroup('my-app-group');
}, 8000)

Fullscreen

const { controller } = fyzDashboard;
controller.isFullscreen = true;

controller.isFullscreen$.pipe(rxjs.take(1)).subscribe(isFullscreen => {
    console.log("Is Fullscreen", isFullscreen);

    setTimeout(x => {
        controller.toggleFullscreen();
    }, 1000);
});