Umbraco.CMS.Backoffice/storybook/stories... Umbraco #package-development

Umbraco.CMS.Backoffice/storybook/stories...

Hooky

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

Hooky

02/02/2024, 12:48 PM

https://apidocs.umbraco.com/v14/ui/?path=/docs/guides-extending-the-backoffice-header-apps--docs

Hooky

02/02/2024, 12:50 PM

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

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

Jacob Overgaard

02/02/2024, 12:56 PM

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',
    },
}

Hooky

02/02/2024, 2:55 PM

Cool thank you Jacob. Will take a look 🙏

Hooky

02/02/2024, 2:57 PM

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&

Jacob Overgaard

02/02/2024, 3:05 PM

We haven't gotten to that part yet 😅

Kevin Jump

02/02/2024, 5:16 PM

header app buttons : ) https://dev.to/kevinjump/early-adopter-umbraco-v14-header-apps-and-modals-1j1g

Kevin Jump

02/02/2024, 5:17 PM

I actually think the timedashboard repo is becoming the most usefull thing from these posts https://github.com/KevinJump/TimeDashboard

Hooky

02/28/2024, 12:38 PM

Sorry @Kevin Jump I completely missed this. Thank you so much for your help these are brilliant

Previous Next