Implementing Custom Sidebar with Atlaskit in Atlassian Server Plugin

Confluence Development Confluence Server
1

I am currently writing a confluence server plugin and I try to use exclusively REACT.

I was able to set up the complete stack with webpack, the awesome atlassian-webresource-webpack-plugin (atlassian-webresource-webpack-plugin - npm) a and velocity template to mount the react application. right now, everything is working. I plan to use the atlaskit react components and i tried to implement a custom sidebar in the plugin page. (that only contains a div to mount the react app)

The result using the “Navigation Next” (Atlaskit by Atlassian) looks like this:

Screenshot%20from%202019-09-30%2013-01-49
Screenshot%20from%202019-09-30%2013-01-491286Ă—820 17.3 KB

The sidebar overlaps the top main bar, and messes other things up.

After some online research, i discovered that for Server Plugins, on should use AUI for template/UI styling.

Is there a way to integrate a custom sidebar cleanly with React/Atlaskit into a server plugin? Or should i use just AUI/sidebar (Sidebar - AUI Documentation)?

PS: I’ve read the following resource: Building User Interfaces of Atlassian Apps with Atlaskit and AUI | Deviniti Technology-Driven Blog that points out the differences, but i am still not quite sure how to proceed…

Many thanks

1 Like
2

@normansuesstrunk did you have a look at Atlaskit by Atlassian? Maybe that is suitable for your use case.

The benefit of doing everything in AtlasKit is that you have more control over the UI (as Server product version ship with different AUI versions), but it does also limit you in terms of the available components. So you might need to roll your own from time to time.

3

many thanks for the reply.

The benefit of doing everything in AtlasKit is that you have more control over the UI (as Server product version ship with different AUI versions), but it does also limit you in terms of the available components. So you might need to roll your own from time to time.

exactly. as far as i see, all the ui components i would need are covered with Atlaskit. The Navigation Next would also exactly have what i need - but i did not found a way to include it in the template so it “stays” in the container div.

4

I think the problem with the Navigation Next component is that it really was created for the Cloud product suite. This applies to all AtlasKit components. The general rule of thumb to remember here is: AtlasKit = Cloud, AUI = Server.

So while you still can use AtlasKit components in Server, there will definitely be situations where you can’t use some of the components. I would strongly recommend against using Navigation Next in server as this will break the UI that Server users will expect.

What is your use-case for wanting to implement Navigation Next? Is this for an internal app, or do you want to publish your app on the Atlassian Marketplace?

1 Like