index.mdx

title	description	meta_tags	namespace	menu_namespace	permalink
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.	edge, console, development, interface, vue, primevue	documentation_devtools_console_kit_ui	devtoolsMenu	/documentation/products/guides/customize-interface-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.

:::caution[warning] To follow this guide, you must first setup your Console Kit project on a forked repository in your account and initialize the project using Azion CLI to run it locally. Then, you can work on changing the forked version of the Azion Console and, once you're done, deliver the project to the edge using the CLI. :::

---

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'
  ...

4. 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()
  ...  

5. 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' })
  }
</script>

:::tip You can use this function with the routes defined in the src/router/routes folder. :::

6. 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>
    ...

7. 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.
8. After you're done, run azion deploy to launch the changes to the edge.

---

import AuthorList from '~/components/AuthorList.astro'

Contributors