https://discord.umbraco.com logo
#package-development
Umbraco.CMS.Backoffice/storybook/stories...
# package-development
h

hooky17

02/02/2024, 12:46 PM
Hi all 👋 - not sure the best place to ask this but punting for in here for now given it's around a package I'm working on. I've seen in the new Backoffice we can integrate/extend our own 'HeaderApps' (where Search and Help live currently). I've looked around the docs and in the storybooks in the Backoffice repo and I can't for the life of me find any info on how to create these yet. I'm aware it's quite possible that's simply not finished yet but wondered if anyone had any experience with doing so The closest thing I found was this. https://github.com/umbraco/Umbraco.CMS.Backoffice/blob/0c6b45786f1c5e84d8fdc3cf59a300672550be04/storybook/stories/extending/header-apps.mdx but as mentioned, appears unfinished
Worth adding, I appreciate this likely simply isn't ready yet. I'm working on something for a talk I'm planning so was simply looking to get a bit of a headstart
j

Jacob Overgaard

02/02/2024, 12:52 PM
At the moment we show any extensions of type "headerApp" in that area. The styling is really up to you. It will show the element you tell it to show. Here is the component that renders the header apps: https://github.com/umbraco/Umbraco.CMS.Backoffice/blob/main/src/apps/backoffice/components/backoffice-header-apps.element.ts
If you want to render a button similar to the default buttons in the backoffice, I think you can provide additionally a "kind" property and set that to "button"... something like:
Copy code
{
    type: 'headerApp',
    kind: 'button',
    name: 'My Header App Example',
    alias: 'My.HeaderApp.Example',
    meta: {
        label: 'My Example',
        icon: 'icon-home',
        href: '/some/path/to/open/when/clicked',
    },
}
h

hooky17

02/02/2024, 2:55 PM
Cool thank you Jacob. Will take a look 🙏
One follow up question. Does the concept of a drawer like the old 'help' menu stull exist in v14? Or do we really only have the flyout overlay to work with? https://cdn.discordapp.com/attachments/1202958262777942068/1202991089309450382/image.png?ex=65cf77c2&is=65bd02c2&hm=8dd26aba4039f5b46373811225eba95a7fa250131decdeb81d4fd19879adcdb2&
j

Jacob Overgaard

02/02/2024, 3:05 PM
We haven't gotten to that part yet 😅
k
I actually think the timedashboard repo is becoming the most usefull thing from these posts https://github.com/KevinJump/TimeDashboard