Components

Modals

Description

The UI kit provides features for rendering modals, these can be programatically displayed and saves you a lot of time for quickly getting user feedback, asking them to confirm actions, select options or input answers to questions.

Usage

Each modal is triggered through use of the Javascript SDK, usually added to the global scope and available as `this.$sdk`. When opening a modal a promise is returned, the Promise will be rejected if the user dismisses or cancels the modal

Confirmation Modal

Description

Opening a confirmation modal enables you to quickly request a user to confirm an action. Helpful if a user is about to take an action that may not easily be undone, for instance deleting an item or making a payment.

Arguments

title	The title as shown to the user at the top of the confirmation modal
options	An optional object with more parameters for customising the modal
options.description	Additional text to show to the user

Usage

const confirmed = await this.$sdk.confirm(title, options)

Code

export default {
    methods:{
        async open() {
            const confirmed = await this.$sdk.confirm('Are you sure?', {description:'This action can not be undone'})
        
            // The action was confirmed
        }
    }
}

See it in action

Options Modal

Description

Open a modal presenting multiple options for the user to select. The function will return a promise that resolves with the option the user selects, or rejects if the user clicks 'Cancel' or closes the modal

Arguments

choices	An array of choices the user can select, these can be complex javascript objects or simple strings, numbers etc.
title	The title as shown to the user at the top of the confirmation modal
description	Additional text to show to the user

Usage

const choice = await this.$sdk.options(choices, title, description)

Code

export default {
    methods:{
        async open() {
        
            const choices = [{
                title:'Option 1', 
                description:'Choose this option', 
                value:'1'
            }, {
                title:'Option 2', 
                description:'Choose this option', 
                value:'2'
            }];
            
            const choice = await this.$sdk.options(choices, 'Please choose an option', 'Make your choice wisely')
           
            alert('You chose option ' + choice.title);
        }
    }
}

See it in action

Prompt Modal

Description

Open a modal with questions provided via the form fields API. Once the user inputs and submits the form, the modal's promise will resolve with the user's input

Arguments

fields	An array of fields to present to the user.
options	Additional options for the modal
options.description	Provide additional text to be displayed above the form
options.model	Provide a starting data model for the form

Usage

const data = await this.$sdk.prompt(fields, options)

Code

export default {
    methods:{
        async open() {
            const fields = [{
                title: 'First Name',
                key: 'firstName',
                minimum: 1,
                maximum: 1,
            }, {
                title: 'Last Name',
                key: 'lastName',
                minimum: 1,
                maximum: 1,
            }];

            const {firstName, lastName} = await this.$sdk.prompt(fields, {title:'Who are you?', description:'Please enter your details below'})

            alert('Hello ' + firstName);
        }
    }
}

See it in action

Content Modal

Description

Open a modal allowing the user to select content items from the database. Please note that only items the user has permission to view or list will be viewable to select.

Arguments

type	The database key for the type of content you want to browse, e.g. 'article' or 'blogPost' etc.
options	Options defining the list criteria, filters, sorting and other options

Usage

const items = await this.$sdk.browse('articles', {
            maximum:3, browserOptions:{}})

Code

export default {
    methods:{
        async open() {
            const browserOptions = {}

            // Set the sorting order of the list
            browserOptions.sort = {
                direction: 'asc',
                key: 'title',
                type: 'string',
            }

            // Which fields should be retrieved
            browserOptions.select = ['title', 'meta']

            browserOptions.columns = [{
                    title: 'Title',
                    key: 'title',
                },
                {
                    title: 'Created Date',
                    key: 'meta.created',
                },
                {
                    title: 'Slug',
                    key: 'meta.slug',
                },
            ]

            // Add a filter that can't be edited by the user
            browserOptions.lockFilter = {
                operator: 'and',
                filters: [{
                    key: "title",
                    comparator: "startsWith",
                    value: 'c',
                }]
            },
        }

        const selected = await this.$sdk.browse('uiDocumentationArticle', {
            maximum: 3,
            browserOptions
        })

        alert('You selected ' + selected.map(function(item) {
            return item.title
        }).join(', '));
    }
}

See it in action

Custom Modal

Description

Open a modal with a custom component

Arguments

settings	An object with parameters and values describing how the modal should work
settings.component	A reference to the custom component to render within the modal
settings.options	Additional data object

Usage

const result = await this.$sdk.modal(modalSettings)

Code

export default {
    methods:{
        async open() {
            const modalSettings = {
                component:this.$sdk.app.components['myComponent'], 
                options:{
                    hello:'world'
                }
            }
            
            const result = await this.$sdk.modal(modalSettings)
        }
    }
}