UIKit Components

Forge Forge UI Kit and Custom UI
1

Hi,

I have a Confluence Forge application that is currently built using UIKit, and the Frame component that wraps HTML + JS + CSS content saved as an attachment on the page. So most of the dynamic behaviour is in the attachment.

The Confluence Forge application has an equivalent SharePoint WebPart that has recently been significantly updated to use Fluent UI components, making the application look and feel closer to SharePoint i.e. moving away from the static attacment in IFrame approach.

I want to make the application look closer to Confluence, and have been reviewing the available UIKit components. The available components do not appear to have some components that I need to provide a comparable user experience to the SharePoint WebPart.

Specifically I am looking for a UIKit equivalent for Fluent UI CommandBar, ContextualMenu and SearchBox.

Just wondering what others have done where UIKit components are not available. Possibly the simplest approach might be a custom UI with a third party React component library. Are there any known compatiability issues with Forge - and if what recommendations do people have regarding suitable component libraries.

Cheers,

Andrew

2

Hi Andrew,

None of those three exist. The shipped @forge/react types barrel exposes 72 components, and CommandBar, ContextualMenu and SearchBox are absent under those names or anything close to them.

The nearest pieces you would assemble from are Popup for the contextual menu, Textfield for the search box, and ButtonGroup with Button or LoadingButton for the command bar. That is assembly rather than a drop-in, and it will cost you the keyboard behaviour Fluent gives you for free.

The Custom UI route turns on permissions.external. It splits into fetch, fonts, frames, images, media, navigation, scripts and styles, and each is declared separately. A component library bundled into your resource makes no runtime requests and needs none of them. The libraries that catch people out are the ones pulling an icon font or a stylesheet from a CDN at render time, because each category is declared separately and it is easy to ship having declared only fetch.

Which components are actually load-bearing for your WebPart parity?