Application

Dashboard.Application

confirm()

There is two ways to display confirm messages in Dashboard.

• Notification confirm, see: DNA.
• Application confirm this.confirm().

This api will prompt a custom confirm message within your application

this.confirm(YOUR_CONFIRM_OBJECT)

confirm api takes one arrgument type Object You can either pass your confirm message and callbacks in two ways: Default-Confirm object

Attr	Type	Default	Description
headline	String	'Confirm'	Your confirm box headline
message	String	null	Your confirm box message
buttonTexts	Array	['Cancel', 'Confirm']	Your confirm box button labels
onConfirm	Function	null	Callback when user click on Confirm button
onCancel	Function	null	Callback when user click on Cancel button

example

const myConfirmObject = {
    message: `You're about to delete ${conceptName}, are you sure?`,
    buttonTexts: ['Cancel', 'Delete'],
    onConfirm: () => {
        this.deleteConcept()
    }
}

this.confirm(myConfirmObject)

you can see that we didn't pass onCancel callback, that means when user click on Cancel button Dashboard will close the confirm automatically.

Custom-Component object

Attr	Type	Default	Description
component	React Component	null	Your custom confirm component

example

class MyCustomConfirm extends Component {
    render() {
        const { closeConfirm, onConfirm, headline, message, cancelLabel, confirmLabel } = this.props
        
        return (
            <Headline text={headline}/>
            <Message text={message}/>
            <ButtonsWrapper>
                <Button text={cancelLabel} onClick={closeConfirm}/>
                <Button text={confirmLabel} onClick={() => {
                    onConfirm()
                    closeConfirm()
                }}/>
            </ButtonsWrapper>
        )
    }
}

const myConfirmObject = {
	component: <MyCustomConfirm
	    cancelLabel={'Cancel'}
	    confirmLabel={'Delete'}
	    onConfirm={this.deleteItem}
	    closeConfirm={this.closeConfirm}
	    message={'This action will efect....'}
	    headline={'Are you sure you want to delete ....?'}
	/>
}

this.confirm(myConfirmObject)

You notice that we passed this.closeConfirm to MyCustomConfirm component

this.closeConfirm() is an api will handle clossing the confirm manually, as long as you are using a custom component to display your confirm message Dashboad does not know when to unmount the confirm box so you should call this.closeConfirm() manually

seeksAttentionOnWorkspaceLeave()

Should not be called in the application constructor.

this.seeksAttentionOnWorkspaceLeave()

Call seeksAttentionOnWorkspaceLeave to prompt the user if it really wants to change workspace. The user can then cancel and stay in the current workspace, or choose ignore and change anyway.

example

seeksAttentionOnWorkspaceLeave should only be called when the application needs to prompt the user. Therefore call it and pass false when the application do not need to prompt the user anymore. An application that always seeks attention can be seen as annoying for the user.

this.seeksAttentionOnWorkspaceLeave(false)

openModal()

this.openModal(YourModalClass, () => {
    // This callback is called when the modal has rendered.
    // Therefore this is a good place to start sending data to the modal.
})

closeModal()

this.closeModal()

openApplicationInModal()

const modalParams = {
    title: 'Writer Plugin',
    modalSize: Dashboard.MODALSIZE.WIDE,
    onApplicationRendered: () => this.send({
        target: 'se.infomaker.Writer',
        name: 'se.infomaker.Writer:internal:setUrl',
        userData: {
            url: 'https://writer.demo.imit.infomaker.io',
            tabs: true
        }
    }),
    callback: data => {
        if (data.err) {
            console.warn(data.message)
            console.warn(data.err)
        }
    }
}

this.openApplicationInModal('se.infomaker.Writer', modalParams)

openApplicationInModal takes two params: the first param is a string for application bundle that you want to open it inside a modal. Dashboard will go through all installed plugins and look for the bundle that has been passed and if it's matched and that plugin can be run in modal will return a success message with callback function if it's passed with the second param

learn more about allow plugin to run inside modal: manifest allowRunInModal

the second param is an object contain modal config

Attr	Type	Default	Description
title	string	application name	Custom modal title
modalSize	Dashboard.MODALSIZE	NORMAL	Spicfy the modal size see Dashboard.MODALSIZE
onApplicationRendered	function	null	On application rendered callback, will be called when the application DID MOUNT
callback	function	null	A callback function will be called with an info object

callback object contain tow properties: {message, err} the message will tell if it's success to run the application inside a modal or not, and the err will tell why if it failed to run the application inside a modal