Including UI elements such as Spaces sidebar, Comments etc. in a custom XWork-WebWork view

paul.folder · April 11, 2018, 7:44am

Hi everyone,

(Note: As I’m a new user here I can’t post more than 1 image, so will link to them instead.)

I am building a Confluence Server plugin.

I have a custom web item and a custom WebWork action.

The web item is located in the Actions menu of a page.

When I click the web item, it takes me to the view returned by the WebWork action. However, I have only gotten the atl.admin and atl.general decorators to work.

Here is the Velocity template:

Hello World - in title

Hello World!

And the resulting view:

How can I get my custom page to show the Spaces sidebar to the left, the breadcrumb and various interaction options at the top of a page (Share, Like, etc.) and the Comment section at the bottom? These:

I have some experience with developing JIRA plugins where it was relatively simple to get a custom page to show e.g. in the Project Settings. Confluence seems to be a different beast so far.

Panos · April 11, 2018, 8:02am

Hello and welcome,
I am not quite sure if that is possible at first place since those elements are tied with the page but you are rendering a custom vm from an action.

In your case i would suggest to take a look on macro documentantion and then create a new page within that space and insert your macro within new newly created page. Doing so, you are getting all the above goodies without having to pull decorators.

paul.folder · April 12, 2018, 12:02pm

Hi Panos,

Thanks for your reply.

I should mention that this is not supposed to be a macro, that is, I don’t want the user to have to insert a macro into a page to be able to see the UI and my functionality; rather, I want the user to see that as soon as the page is rendered. And the page is not a ‘plain wiki page’ in Confluence context, rather a page similar to:

-The pages shown when browsing Space Tools > Content Tools > any of those tabs:

-Any of the pages rendered when clicking a web item on the Actions menu of a wiki page:

Panos · April 12, 2018, 12:25pm

Might worth to try this

paul.folder · April 13, 2018, 2:14pm

I tried it. Here is the view code that I used:

<!DOCTYPE HTML>
<html>
<head>
    <title>Hello World!</title>
    <meta name="decorator" content="atl.general"/>
</head>

<content tag="key">$action.space.key</content>

<body>
    #applyDecorator("root")
    #decoratorParam("helper" $action.helper)
    #decoratorParam("context" "space-administration")
    #decoratorParam("mode" "view-space-administration")

    #applyDecorator ("root")
    #decoratorParam ("context" "spacetoolspanel")
    #decoratorParam ("selection" "outgoing-links")
    #decoratorParam ("title" $action.getText("action.name"))
    #decoratorParam ("selectedTab" "admin")
    #decoratorParam("helper" $action.helper)

<strong>Hello, Confluence World!</strong>
#end
#end

</body>
</html>

And the result:

I wish I understood how this is supposed to work…

Panos · April 13, 2018, 2:41pm

I’ve never tried to do what you are trying so my help might be limited.

I could guide you though to understand how this is supposed to work:
The #appyDecorator("root") macro calls this specific decorator and each subsequent #decoratorParam macro passes that param to the decorator.
If you have the confluence source, there are .vmd files. One of them is called root.vmd and is the one called by the first #applyDecorator.

On top of that, be sure that $action.getText and $action.helper $action.space.key resolve to something by e.g printing them within the <strong> tag. Most likely $action.space.key resolves to nothing since your page is not within any space.

Update: here you can find a similar answer by atlassian stuff

joshiru · April 17, 2018, 6:10pm

Hi Paul

Do you have any update on this? We are trying to do the same thing and I have created a ticket yesterday Add Spaces sidebar and breadcrumb to custom confluence page created using web-item, xwork action and Panos pointed me to this one.

We tried using atlaskit library to get the breadcrumb to show up, but having some issues with react version conflicts.

paul.folder · April 18, 2018, 10:54am

Here’s what I’ve realized so far:

I took a look at some of the Content Tools-related views in the source code of Confluence. I saw that there is some complicated application of double root decorators, and so decided to start by instead getting my view to show as a regular wiki page.

So far, I have been able to get the Space sidebar to show:

Two things are necessary to get that working:
-The XWork-webwork action must implement the SpaceAware interface,
-The view must reference the root decorator, as Panos indicated. Here is my view:

<!DOCTYPE HTML>
<html>
<head>
    <title>Hello World!</title>
</head>
    #applyDecorator("root")
    #decoratorParam("helper" $action.helper)
    #decoratorParam("mode" "view")
    #decoratorParam("context" "page")
<body>

<h1>My content goes here, in the body</h1>

</body>
#end

</html>

Note that the decorator ‘root’ has some decoratorParams. There may be other values available there, not sure.

joshiru · April 24, 2018, 4:46pm

Hi Paul,

Thanks for the detailed answer. I tried this but didn’t get it working, I do see $customHeader and $customFooter but not the sidebar. Are you sending space key in the web-item link tag? Also, in your xwork-webwork action java class, do you implement those methods or you have declared the class as abstract. Do you have any dependency related to sidebar in your web-resource that you import in your view? Sorry if the questions are naive. I am just starting development in asdk stack. Thanks for your help.

christoffer · April 25, 2018, 12:15pm

If you drop the mode “view” and use your own mode, then you’ll get rid of the header and footer stuff and the title as well. E.g. “mode” “pauls-page”.

gaoyy · May 1, 2018, 2:41pm

I got it working by doing the following:

in java action

public class YourClass extends ConfluenceActionSupport implements PageAware {}

in vm template:

#set ($confPage = $action.page)
#set ($helper = $action.helper)       
#set ($pageType = $confPage.getType())

#applyDecorator("root")
     #decoratorParam("helper" $helper)
     #decoratorParam("mode" "your-mode")
     #decoratorParam("context" "$pageType")
     <body>
     </body>
#end

in web-item:

<web-item key="your-key" name="the-name" section="system.content.action/primary" weight="44">                
        <link linkId="link-id">/pages/youraction.action?pageId=$page.id</link>
    </web-item>

paul.folder · May 9, 2018, 7:20am

Hi joshiru,

Yes, I’m sending the space key in the link, here is the relevant line in atlassian-plugin.xml:

<link linkId="my-link">/spaces/myxworkwebwork.action?key=$generalUtil.urlEncode($helper.spaceKey)</link>

Yes, in the XWork-webwork action Java class, I am implementing all four methods, and of course I have a space variable to go along with those, like so:

private Space space;

 @Override
    public void setSpace(Space space) {
        this.space = space;
    }

    @Override
    public boolean isSpaceRequired() {
        return true;
    }

    @Override
    public boolean isViewPermissionRequired() {
        return true;
    }

    @Override
    public Space getSpace() {
        return this.space;
    }

No special dependencies related to the sidebar.

I hope you get it working, too.

paul.folder · May 9, 2018, 7:20am

Thanks christoffer, that is useful information, and indeed works.