Skip to main content

Alerts and confirmations

When you are writing custom components or pages you might need to show alerts or confirmations to the user.

For example if fetch to the API fails you might want to show an error message to the user.

AdminForth has very simple frontend API for this.

To see an example of alerts, you can call them yourself.

Create a Vue component in the custom directory of your project, e.g. Alerts.vue:

./custom/Alerts.vue
<template>
    <div class="ml-3 mt-16">
        <button @click="callAlert('Example success alert')" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">Call alert</button>
        <button @click="callConfirmation" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">Confirmation</button>
        <button @click="callAlert('Example danger alert','warning')" class="focus:outline-none text-white bg-orange-500 hover:bg-orange-400 focus:ring-4 focus:ring-orange-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-900">Danger alert</button>
    </div>
</template>
<script setup>
function callAlert(message,variant='success'){
    window.adminforth.alert({message: message, variant: variant})
};
async function callConfirmation(){
    const isConfirmed = await window.adminforth.confirm({message: 'Are you sure?', yes: 'Yes', no: 'No'})
}
</script>

Now let's add this page to the AdminForth menu:

/index.ts
menu: [
{
    label: 'Alerts',
    icon: 'flowbite:bell-active-alt-solid',
    component: '@@/Alerts.vue',
    path: '/alerts'
}

Here is how alert looks: alt text

And here is how confirmation looks: alt text

Announcement​

You can notify users of important information by displaying an announcement badge in side bar:

/index.ts

  customization: {
    announcementBadge: (adminUser: AdminUser) => {
      return { 
        html: '⭐ <a href="https://github.com/devforth/adminforth" style="font-weight: bold; text-decoration: underline" target="_blank">Star us on GitHub</a> to support a project!',
        closable: true,
        title: 'Support us for free',
      }
    }
  },

Here's what the announcement will look like: alt text