Using the Javascript SDK

The Qik Javascript SDK is available to your interface by default. And added to the global scope at $sdk You can access it from with your Vue components at this.$sdk And inside your services by using just $sdk

Documentation for the SDK can be found here.

The app service

The app service is augmented onto every interface via the Javascript SDK and provides contextual data about the current interface, application, user and route, in addition to a number of helpful features and functions for developing your app.

Using the App Service

To use the app service, within your javascript code you can access it via the SDK as per these examples:

this.$sdk.app when in a VueJS component Or in html directly like this <pre>{{$sdk.app.route}}</pre>

• $sdk.app.route
  provides the details about the current route, it's properties, any dynamic content it's loaded from it's URL parameters and it's current state (if it's fully loaded)

• $sdk.app.menus
  provides a hashed object of all the menus of the interface and their items

• $sdk.app.user
  provides the details about the logged in user (if a user has logged in)

• $sdk.app.builder
  Provides context of the builder, if previewing the interface within the interface builder. Will return undefined in a published application

• $sdk.app.device
  provides the details about the current device used to view the interface, including the screen dimensions, breakpoints and viewport dimensions.

• $sdk.app.application
  provides the details about the current application. It's access token, domain name and other information. Keep in mind that an interface can be used in multiple applications, so when viewing the preview in the builder this property will reflect the application selected in the emulation settings.

• $sdk.app.to()
  Provides a function to programmatically navigate the user to a specific route, by providing the route id, parameters and query string variables.

The Date Service

The date service is augmented onto every interface via the Javascript SDK and provides helpful tools for parsing, formatting and working with dates.

• $sdk.date.format(date, format)
  This function takes 2 arguments, a javascript date object (or ISO timestamp) and string representing the format you wish to render the date to. As the date service uses luxon behind the scenes, you can format the date using any tokens as per the luxon documentation here: https://moment.github.io/#/luxon/formatting?id=table-of-tokens

The Device Service

The device service is augmented onto every interface via the Javascript SDK and provides helpful tools for understanding the context of the device the user is using to view your interface. This is a readonly service and is mainly used for responsive design.

Examples

{
    data() {
            return {
                routes: [{
                        title: 'Home',
                        url: '/'
                    },
                    {
                        title: 'Blog',
                        url: '/blog/:slug'
                    },
                    {
                        title: 'Search',
                        url: '/search'
                    },
                ]
            }
        },
        methods: {
            click() {
                // Would navigate to `https://website.com/`
                this.$sdk.app.to({
                    name: 'home',
                })
            },
            clickWithParams() {
                // Would navigate to `https://website.com/blog/example-blog-1`
                this.$sdk.app.to({
                    name: 'blog',
                    params: {
                        slug: 'example-blog-1',
                    }
                })
            },
            clickWithQueryString() {
                // Would navigate to `https://website.com/search?keywords=elephants`
                this.$sdk.app.to({
                    name: 'search',
                    query: {
                        keywords: 'elephants',
                    }
                })
            }
        }
}

<h5>{{menu.title}}</h5>
<ux-menu-list :items="menu.items" />

{
    computed: {
        menu() {
            // Get the menu with a key of 'primaryMenu'
            return this.$sdk.menus['primaryMenu']
        },
    }
}

<div v-if="$sdk.app.user">
    Welcome {{$sdk.app.user.firstName}}
</div>
<div v-else>
    Please log in to access this content
</div>

 <div v-if="$sdk.app.device.breakpoint.smAndUp"> Hey there my big screen buddies!</div>