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

Section titled 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:

  1. Open the Console Kit project in your IDE.
  2. Run azion dev to initialize a local development server.
  3. 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'
  1. 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()
  1. Create the navigateToDomains function that will be executed when the user clicks the PrimeButton before closing the <script> tag:
// on push action to redirect user to create-domain route
function navigateToDomains() {
router.push({ name: 'create-domain' })
  1. 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 --->
>Remember to create a
and select an edge application to launch online.
<template #content>
  1. On the browser, access the localhost address and navigate to the Edge Applications page. You should see the InlineMessage element with a PrimeButton under the heading.
  2. After you’re done, run azion deploy to launch the changes to the edge.