# Ui ## showNotification(name, title, message, \[sticky], \[level]) Show a notification, if Writer is used inside of Dashboard, the notification will be elevated and displayed through the Dashboard notification instead ### Parameters | Param | Type | Default | Description | | ------- | --------- | -------------------- | ----------------------------------------------------------------------- | | name | `string` | | **Required -** The plugin ID of the plugin that sent the notification | | title | `string` | | **Required -** Notification title | | message | `string` | | **Required -** Notification message | | sticky | `boolean` | `false` | Optional, default false, if true notification stays till user closes it | | level | `string` | `""info""` | Optional, default info. success | ### Example ```js api.ui.showNotification( 'plugin.id', 'An insightful title', 'And descriptive text', false ) ``` ## showArticleMessage(origin, id, options) Display a message with static positioning at the top of the article. Can disallow closing, and can include buttons with callback functions. ### Parameters | Param | Type | Description | | ------------------ | ---------------- | ------------------------------------------------------------------------------------ | | origin | `string` | **Required -** The plugin ID of the plugin that sent the article message | | id | `string` | **Required -** Article message id | | options | `object` | **Required -** Message options | | options.message | `string` | **Required -** Article message message | | options.allowClose | `boolean` | **Required -** Optional, default true, Allow the message to be closed | | options.buttons | `Array.` | **Required -** Optional - Array of button objects {label: string, onClick: function} | ### Example ```js api.ui.showArticleMessage('some.plugin.io', 'my-message-id', { message: 'This is important', buttons: [ { label: 'Say hello', onClick: () => { // Do something } } ] }) ``` ## showDialog(contentComponent, props, options, \[focusPrimary], \[theme], \[takeover], \[cssClass], \[clearSelection], \[disableEscKey], \[heading]) Display a dialog with the specified content. Supported dialog actions: \`dialog:enablePrimaryBtn\`Enables the primary button\`dialog:disablePrimaryBtn\`Disables the primary button **See**: [component/dialogComponent](https://github.com/Infomaker/naviga-writer-docs/blob/master/api-reference/writerapi/component/dialogComponent/README.md) ### Parameters | Param | Type | Default | Description | | ----------------- | ----------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------- | | contentComponent | `*` | | **Required -** A substance component or tool that will be rendered inside the dialog | | props | `Object` | | **Required -** A object that will be passed as props to contentComponent | | options | `Component.DialogComponent.Options` | | **Required -** Options passed to dialog | | options.title | `string` | | Dialog title | | options.primary | `string` \| `boolean` | | Primary button caption, default is i18n representation of Ok, set to false to disable button | | options.secondary | `string` \| `boolean` | | Secondary button caption, default is i18n representation of Cancel, set to false to disable button | | options.tertiary | `Array.` | | Third button | | tertiary.caption | `string` | | **Required -** Button label | | tertiary.callback | `function` | | Callback when clicking button | | focusPrimary | `boolean` | `true` | Focus on primary button on rendering | | theme | `string` | `""light""` | Choose theme for dialog. Dark or light. Dark with light overlay and vice versa | | takeover | `boolean` | `false` | When set to true got a full width and height modal | | cssClass | `string` | | Add css class to be append to modal for external styling | | clearSelection | `boolean` | `true` | Remove cursor and selection in the writing area when modal is presented | | disableEscKey | `boolean` | `false` | Disabled ESC key to close modal | | heading | `string` | | Apply additional heading. Should be handled in the compontent if it can. | ### Example ```js import {api} from 'writer' import {ComponentShownInDialog} from './ComponentShownInDialog' api.ui.showDialog( ComponentShownInDialog, { src: img.src, width: this.props.node.width, height: this.props.node.height, crops: this.props.node.crops, callback: this.setSoftcropData.bind(this) }, { title: "This is my title for the dialog", primary: 'Save', secondary: 'Close', tertiary: [{ caption: 'Remove', callback: () => { // Do something } }], takeover: true, theme: 'dark', cssClass: 'extra-css-class' } ) ``` ## showAuthDialog(authComponent, authProps, authOptions) Display a Auth dialog (401/402) above any other dialogs. ### Parameters | Param | Type | Description | | --------------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------- | | authComponent | `*` | **Required -** A substance component or tool that will be rendered inside the dialog | | authProps | `Object` | **Required -** A object that will be passed as props to contentComponent | | authOptions | `Component.DialogComponent.Options` | **Required -** Options passed to dialog | | authOptions.title | `string` | Dialog title | | authOptions.primary | `string` \| `boolean` | Primary button caption, default is i18n representation of Ok, set to false to disable button | | authOptions.secondary | `string` \| `boolean` | Secondary button caption, default is i18n representation of Cancel, set to false to disable button | | authOptions.tertiary | `string` \| `Object` | Third button | | authOptions.center | `boolean` | As default the dialog is centered over the editor area, set to true to center over the full writer | ## showMessageDialog(messages, cbContinue, cbCancel, \[heading], \[showTimestamp]) Display a number of messages and different options depending on the severity on each message. Messages can be of type info, warning or error. If there are error messages the user will not be able to continue. If there are warnings the user can continue but suggested to cancel. If only info messages only a continue is possible. ### Parameters | Param | Type | Default | Description | | ------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | messages | `array` | | **Required -** An array of message objects. Each object have the properties type (string: info, warning, error), plugin (string: the plugin name) and message (string) | | cbContinue | `function` | | **Required -** Callback function for when the user press continue | | cbCancel | `function` | | **Required -** Callback function for when the user press cancel | | heading | `string` | | Additional text to display above the messages | | showTimestamp | `boolean` | `true` | Set to false to hide timestamp on error messages, not applicable on any other level | ### Example ```js import {api} from 'writer' api.ui.showMessageDialog( [{ type: 'info', message: 'Hello' }], () => { console.log('The user clicked continue!') }, () => { console.warn('The user clicked cancel') } ) ``` ## showConfirmDialog(title, message, buttons) Display a simple confirmation dialog ### Parameters | Param | Type | Description | | ------- | -------- | ------------------------------------------------------------------------- | | title | `string` | **Required -** dialog heading | | message | `string` | **Required -** dialog message | | buttons | `object` | **Required -** object with primary/secondary objects for button specifics | ### Example ```js api.ui.showConfirmDialog( 'Title-string', 'Message string', { primary: { label: this.getLabel('Ok'), callback: () => { logic } }, secondary: { label: this.getLabel('Cancel'), callback: () => { logic } } } ) ``` ## showBottomPanel(pluginName, component, \[props], \[sticky]) Renders a supplied component in a screen-wide panel which smoothly animates from the bottom of the screen. ### Parameters | Param | Type | Default | Description | | ---------- | --------- | ------- | ------------------------------------------------------------------------------------------------ | | pluginName | `string` | | **Required -** Name of plugin that called the function | | component | `string` | | **Required -** Component class to be rendered in the Panel | | props | `object` | | Object which is sent as props to the component class. Defaults to empty object. | | sticky | `boolean` | `false` | Set to true to prevent Panel from closing when clicking outside of the Panel. Defaults to false. | ### Example ```js api.ui.showBottomPanel( 'im-mycoolplugin', MyCoolComponent, { propName: 'propvalue }, true ) ``` ## showOverlay(pluginName, component, \[props]) Renders a supplied component in a "fullscreen" overlay. ### Parameters | Param | Type | Description | | ---------- | -------- | ------------------------------------------------------------------------------- | | pluginName | `string` | **Required -** Name of plugin that called the function | | component | `string` | **Required -** Component class to be rendered in the Overlay | | props | `object` | Object which is sent as props to the component class. Defaults to empty object. | ### Example ```js api.ui.showOverlay( 'im-mycoolplugin', MyCoolComponent, { propName: 'propvalue } ) ``` ## hideOverlay(pluginName) Hides the overlay. Useful to call this in a component that rendered as and overlay component. ### Parameters | Param | Type | Description | | ---------- | -------- | ------------------------------------------------------ | | pluginName | `string` | **Required -** Name of plugin that called the function | ### Example ```js api.ui.hideOverlay('im-mycoolplugin') ``` ## ~~getComponent()~~ ***Deprecated*** Deprecated, use `import {UIComponent} from 'writer'` statements for UIComponents instead