How to customize the Azion Console interface using the Console Kit
Azion Console Kit allows you to craft a custom Azion interface to fit your business needs. In this guide, you’ll learn how to make some simple visual changes to the Azion Console.
Adding an interface component and creating a route function for navigation
In this example, you’ll add a new user interface (UI) component to a list view to draw attention to an important step of a workflow process for Console users.
You’ll add the InlineMessage
and PrimeButton
components to the Edge Applications list view to alert your users that they must create a domain to see edge applications online, with a button action that directs users to the create-domain
route. To do so:
- Open the Console Kit project in your IDE.
- Run
azion dev
to initialize a local development server. - In the
src/views
folder, locate the Edge Application list view and modify the code as follows:
... import { computed, ref } from 'vue'
// import statement for the InlineMessage component import InlineMessage from 'primevue/inlinemessage'
// import statement for the PrimeButton component import Illustration from '@/assets/svg/illustration-layers.vue'
// import statement for the router function import { useRouter } from 'vue-router' ...
- In the constant declaration section of the code, create the
router
const to reference the router function:
... defineOptions({ name: 'list-edge-applications' })
// reference the router function for the button action const router = useRouter() ...
- Create the
navigateToDomains
function that will be executed when the user clicks thePrimeButton
before closing the<script>
tag:
...
// on push action to redirect user to create-domain route function navigateToDomains() { router.push({ name: 'create-domain' }) }</script>
- Now add the elements to the layout of the list view inside the
<template>
tag:
... <template #heading> <PageHeadingBlock pageTitle="Edge Applications"></PageHeadingBlock>
<!--- add the InlineMessage component and customize the message with the button ---> <InlineMessage class="w-fit" severity="warn" >Remember to create a <PrimeButton link size="small" class="p-0" @click="navigateToDomains" > Domain </PrimeButton> and select an edge application to launch online. </InlineMessage> </template> <template #content> ...
- On the browser, access the localhost address and navigate to the Edge Applications page. You should see the
InlineMessage
element with aPrimeButton
under the heading. - After you’re done, run
azion deploy
to launch the changes to the edge.
Contributors