Snackbar
Snackbar Brick
📘 Developer Guide
With the Snackbar-Brick, you are able to open customizable snack bars to inform the user about events and more
How to open a snackbar build with the designer
const { cRef: brickComponent } = fyzBrick;
brickComponent.open();
How to open a snackbar with custom bricks, but from scripting
Provide a formId
- First create a form in our form builder.
- Where to find the form Id?
Currently its located in the url. Its the 3rd uuid parameter in the url.
fyzUtils.snackbarApi.openDynamic(
'WidgetSnackbarComponent',
{
// ... optional configuration:
contentPadding: 0,
duration: 3000,
horizontalPosition: 'center',
verticalPosition: 'top',
id: 'your-id',
keepOpenUntilDismissOrDuration: true,
keepTrack: true
// ... required configuration:
componentData: {
formId: `fcf4499d-3096-4da6-b3fe-87425dc589e6`
}
}
)
Provide Your Own bricks
const { snackbarApi } = fyzUtils;
snackbarApi.openDynamic(
'WidgetSnackbarComponent',
{
// ... optional configuration:
contentPadding: 0,
duration: 3000,
horizontalPosition: 'center',
verticalPosition: 'top',
id: 'your-id',
keepOpenUntilDismissOrDuration: true,
keepTrack: true
// ... required configuration:
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',
},
]
}
}
)