Snackbar Api
openNotification(...)
Special Parameter
keepOpenUntilDismissOrDuration: force snackbar to stay open. iftrue, the snackbar will be kept open until it is dismissed or the duration is reached. Iffalse, the snackbar will be closed after the duration is reached or another snackbar got opnened.duration: undefined: the duration of the snackbar in milliseconds. If set toduration: undefined, the snackbar will be kept open until it is dismissed or another snackbar is openedkeepTrackiftrue, the snackbar will be kept in the snackbar service and can be closed later. Iffalse, the snackbar will be removed from the snackbar service after it is closed.
How to Open
const { snackbarApi } = fyzUtils;
snackbarApi.openNotification('Hallo Welt!', {
template: 'warning', //optional
variation: 'full', // optional
... // customize the template,
keepOpenUntilDismissOrDuration: true, // optional
duration: undefined, // optional
keepTrack: true // optional
});
Variations
- Minimal
minimal
- Action Only
actionOnly
- Headline Only
headlineOnly
- Indicator Only
indicatorOnly
- Action Headline
actionHeadline
- Action Indicator
actionIndicator
- Headline Indicator
headlineIndicator
- Full
full
Templates
- Neutral
neutral
Default Variation is headlineIndicator
- Info
info
Default Variation is headlineIndicator
- Warning
warning
Default Variation is headlineIndicator
- Error
error
Default Variation is headlineIndicator
- Success
success
Default Variation is headlineIndicator
- System Alarm
systemAlarm
Default Variation is headlineIndicator
- Notice
notice
Default Variation is headlineIndicator
- Acknoledgement Request
acknowledgementRequest
Stays open. Needs acknowledgement
- Default Variation is
full - Location: Bottom Center
- keepOpenUntilDismissOrDuration:
true// keeps the snackbar open, even a new snackar opened - duration:
undefined// keeps the snackbar open - keepTrack:
false// do not trackcloseAll()has no effect - closeShow:
true
- Critical Alarm
criticalAlarm
Stays open. Needs acknowledgement.
Default Variation is full
- Location: Bottom Center
- keepOpenUntilDismissOrDuration:
true// keeps the snackbar open, even a new snackar opened - duration:
undefined// keeps the snackbar open - closeShow:
true
- Safety Alarm
safetyAlarm
Default Variation is headlineIndicator
- Environmental Alarm
environmentalAlarm
Default Variation is headlineIndicator
- Production Alarm
productionAlarm
Default Variation is headlineIndicator
- Diagonstic Alarm
diagnosticAlarm
Default Variation is headlineIndicator
- Communication Alarm
communicationAlarm
Default Variation is headlineIndicator
- Energy Alarm
energyAlarm
Default Variation is headlineIndicator
- Tampering Alarm
tamperingAlarm
Default Variation is headlineIndicator
- State Change Alarm
stateChangeAlarm
Default Variation is headlineIndicator
- Limit Exceedance Alarm
limitExceedanceAlarm
Default Variation is headlineIndicator
- Maintenance Alarm
maintenanceAlarm
Stays open. Needs acknowledgement.
- Location: Bottom Center
- Default Variation is
full - keepOpenUntilDismissOrDuration:
true// keeps the snackbar open, even a new snackar opened - duration:
undefined// keeps the snackbar open - closeShow:
true
How to Catch a Result
const { snackbarApi } = fyzUtils;
const result = snackbarApi.openNotification('Hallo Welt!', {
template: 'warning',
variation: 'full',
... // customize the template
}).result$;
result.pipe(rxjs.take(1)).subscribe(res => {
if(res === true) {
// action clicked
} else {
// close clicked
}
})
How to Close Programatically
const { snackbarApi } = fyzUtils;
const id = snackbarApi.openNotification('Hallo Welt!', {
template: 'warning',
variation: 'full',
... // customize the template
}).id;
// close by id
snackbarApi.close(id);
// cloase all where keepTrack = true
snackbarApi.closeAll();
Snackbar Brick
How to open a snackbar build with the designer
const { cRef: brickComponent } = fyzBrick;
brickComponent.open();
How to open a snackbar with custom bricks, but with scripting
fyzUtils.snackbarApi.openDynamic(
'WidgetSnackbarComponent',
{
componentData: {
bricks: [
{
tags: ['layout'],
version: 'v3',
config: {
visible: true,
style: {},
classes: '',
classDefinitionCode: '',
classDefinitionScope: 'children',
},
children: [
{
tags: ['content'],
version: 'v3',
key: 'onHtmlClicked',
config: {
eventBus: 'brick',
visible: true,
code: '<!--\nExample how to pass date to a button event.\nYou can pass data with the data-data attribute in the HTML element.\n<button id="buttonId" data-data=\'{"data": "Hello World!" }\'>New Button</button>\n-->\nTest',
},
children: [],
id: '4d50a6ef-209d-4f9c-8afe-dad5f498f0c5',
icon: 'html',
scripts: {
actionScripts: {
onHtmlClicked: [
{
name: 'onHtmlClicked',
isActive: false,
eventBus: 'brick',
script: "\n // Input\n const {\n elementId\n } = actionData;\n // App\n // const { event: appEvent, env: appEnv } = fyzApp;\n // Dashboard\n // const { event: dashboardEvent, env: dashboardEnv } = fyzDashboard;\n // Scope\n // const { event: scopeEvent, env: scopeEnv } = fyzScope;\n // Brick\n const {\n event: brickEvent,\n env: brickEnv,\n api: brickApi,\n cRef: brickComponent\n } = fyzBrick;\n switch (elementId) {\n case 'buttonId':\n const {\n data\n } = actionData;\n break;\n default:\n break;\n }\n",
id: '47586ef2-6a77-4577-9c1c-d06cf31c8337',
isAsync: false,
description: 'No Description',
version: '2.0.0',
},
],
},
},
type: 'html',
orderId: 1,
environment: {},
templateId: 'html-default',
scriptingVersion: '2.0.0',
},
{
tags: [{ value: 'actions' }],
version: 'v3',
key: 'onButtonClicked',
config: {
text: 'Scripting Snackbar',
tooltip: '',
visible: true,
show: true,
eventBus: 'brick',
state: 'default',
buttonStyles: { display: 'flex', gap: '8px' },
buttonBaseStyles: {},
stateStyles: {
default: {},
hover: {},
disabled: {},
inverted: {},
transparent: {},
},
shortcut: {
key: '',
ctrlKey: true,
altKey: true,
shiftKey: false,
},
prefixIcon: {
iconGroup: '',
iconName: '',
inheritColorFromState: true,
show: false,
iconConfig: {
size: 16,
styles: {},
hoverStyles: {},
},
},
suffixIcon: {
iconGroup: '',
iconName: '',
inheritColorFromState: true,
show: false,
iconConfig: {
size: 16,
styles: {},
hoverStyles: {},
},
},
},
children: [],
id: '33296d6c-7a9b-4dd3-92f0-7937f350b15f',
icon: 'button',
scripts: {
actionScripts: {
onButtonClicked: [
{
name: 'onToolbarClicked',
isActive: true,
eventBus: 'brick',
script: '\n // Input\n const {\n buttonId\n } = actionData;\n // App\n // const { event: appEvent, env: appEnv } = fyzApp;\n // Dashboard\n // const { event: dashboardEvent, env: dashboardEnv } = fyzDashboard;\n // Scope\n // const { event: scopeEvent, env: scopeEnv } = fyzScope;\n // Brick\n const {\n event: brickEvent,\n env: brickEnv,\n api: brickApi,\n cRef: brickComponent\n } = fyzBrick;\n',
id: 'b86b5bad-1772-4686-9c38-95df5a22c19f',
isAsync: false,
description: 'No Description',
version: '2.0.0',
},
],
},
},
type: 'action-button',
orderId: 2,
environment: {},
templateId: 'action-button-default',
scriptingVersion: '2.0.0',
},
],
icon: 'flex',
scripts: {},
type: 'generic-layout',
orderId: 1,
environment: {},
templateId: 'generic-layout-default',
scriptingVersion: '2.0.0',
id: 'dfee187b-7581-4ae4-9771-ea5fd73751e3',
},
]
}
}
)