Access Keys:
Skip to content (Access Key - 0)

Changing the layout based on context

If you have need of switching layouts dependant on the context of the page being viewed, then you can achieve this through the {builder-show} and {builder-hide} macros, when used alongside the {use-layout} macro.

If for example you had a layout with no sidebars, but wanted to display the quick-help guide in the right-sidebar when in edit mode without needing to include the right-sidebar for general pages.

To do this, you would create a child layout to your main layout, lets call it EDITLAYOUT. In this child layout you then switch the right sidebar on and ensure it contains a copy of the {builder-infopanel} macro, and save your changes.

Then move back to the original (parent) layout and edit one of the panels, ideally the first one down the screen, so if you have the header panel switched on then use that, followed by the menu panel, navigation panel etc...

You will then need to enter code similar to this:

{builder-show:mode=edit}{use-layout:EDITLAYOUT}{builder-show}

This concept can be extended using the functionality of the builder-show/hide macros to select the layout based on any number of things, ranging from the user-agent (aka browser/platform) of the person viewing the page, to the kind of page being viewed, the user's permissions on that page, groups, labels, page title, parent page title, orphaned pages, for example:

Display blackberry layout based on browser

{builder-show:user-agent:BlackBerry}{use-layout:BLACKBERRY}{builder-show}

Display layout based on content age

{builder-show:olderthan=3m}{use-layout:OLDNEWS}{builder-show}

Display layout based on parent page title

{builder-show:title=forum|recurse=true}{use-layout:FORUM}{builder-show}

etc...

If you are unsure of the parameters you need for your use-case, please create an issue through tracker



Ask questions, get help and report bugs & issues on our Community Site

View old comments

  1. Mar 05, 2009

    Guy Fraser says:

    From the initial description vmanuja gave, it sounds like the use-layout macro i...

    From the initial description vmanuja gave, it sounds like the use-layout macro is being used within a theme panel, ie. it gets rendered during theme rendering stage, not the initial page rendering stage. As such, the existing layout is already being rendered when the use-layout takes affect and switches to a different layout - surely that will cause the layout settings to get mixed up a bit?

    1. Mar 05, 2009

      Alain Moran says:

      It's complicated to fully explain, if ever you want a complete description of wh...

      It's complicated to fully explain, if ever you want a complete description of what goes on when you call use-layout button-hole me next time I'm passing.

      In laymans terms, when you call use-layout as well as pre-setting the layout it flushes certain caches. This means that any processing done before with the old layout id will be ditched and the panels re-rendered as needed - hence the reason why we encourage you to insert the use-layout macros as high up your layout as possible: its position wont affect the operation of the macro/theme, but placing it low down in the layout (eg footnotes) will cause several panels to be rendered more than once which will slow down your response times.

      1. Mar 09, 2009

        vmanuja says:

        I figured. The issue resided in the fact that even though I had the use-layout i...

        I figured. The issue resided in the fact that even though I had the use-layout instruction in the Header Panel of LAYOUT01, the rest of the code in that Panel still got executed (... <code for LAYOUT01>... in my example above, which had styles that were not meant for the Home Page).

        Interestingly, my Header Panel code in LAYOUT02 was bypassed! I got around it by copying the entire code into the Menu Panel of LAYOUT02 instead.

        I got it to work. But it seem "all" panels are not re-rendered. The panel that calls use-layout in the CALLING Layout, seem to render fully and the tantamount Panel in the CALLED layout gets skipped.

        I don't suspect it is a desired behavior.

        1. Mar 09, 2009

          Alain Moran says:

          I'm going to need a copy of your layout data before I can help you any further.

          I'm going to need a copy of your layout data before I can help you any further.

  • May 25, 2009

    Phillip Linder says:

    @ Alain: I really like the Blast from the Past layout. Is that the layout that t...

    @ Alain: I really like the Blast from the Past layout. Is that the layout that the Theme v4 tutorial is about?

  • Jul 06, 2009

    Malik Hammoutène says:

    Hi all, Is there a way to act not on the layout but on css classes ? Here is o...

    Hi all,

    Is there a way to act not on the layout but on css classes ?

    Here is one example : I have a tab "edit" on each page an I wish the background of the tab "edit" to change when I edit a page.

    Another one : if I have a logo "watch this page", I wish to display another logo (unwatch this page) when the page is currently watched...

    Thank you in advance for any help.
    BR, Malik

    1. Jul 06, 2009

      Guy Fraser says:

      We add loads of classes to the <body> tag which you can use to apply CSS f...

      We add loads of classes to the <body> tag which you can use to apply CSS for various actions, layouts and many other things.

      1. Jul 06, 2009

        Malik Hammoutène says:

        Thank you for your answer, but I am not sure to understand... my problem is not ...

        Thank you for your answer, but I am not sure to understand... my problem is not to add classes or such things, my problem is to create a "if then else".

        Here is an example of what I'm trying to do:

        IF MODE = EDIT PAGE :
        {li:class=menuli}{li}

        ENDIF

        IF MODE = VIEW PAGE :
        {li:class=menuli2}{li} <- here is a different css class
        ENDIF

        Another example :

        IF WATCHSTATE= WATCHPAGE :
        {li:class=menuli }{li}
        ENDIF

        IF WATCHSTATE= UNWATCHPAGE :
        {li:class=menuli2}{li} <- here is a different css class

        ENDIF

        I read the documentation here, but I found nothing...

        Thank aou for your help,
        Malik

        1. Jul 06, 2009

          Alain Moran says:

          you can use flag-logic in conjunction with the builder-show/hide macros to add c...

          you can use flag-logic in conjunction with the builder-show/hide macros to add classes to the body tag, however there is no switch in builder-show/hide that will allow you to check the watch/favourite status of a page/space, this could be added however it would require funding.

  • Sep 10, 2009

    Ville Valtasaari says:

    It seems I'm not getting this. I'm experimenting with a local installation of C...

    It seems I'm not getting this.

    I'm experimenting with a local installation of Confluence 3.0.1 with Builder 3.3.5-conf2.10. I'm trying to make a theme that would have a left sidebar when viewing pages inside spaces and an additional right sidebar when viewing the space home page. No sidebars outside the view context (eg. edit, news, labels, attachments, admin, etc).

    My layout hierarchy:

    • CONFLUENCE27 - had the builder-show statements in the header
      • CF27EXTRA - has the left sidebar
        • CF27EXTRAHOME - has both sidebars

    One of the builder-show statements I tried:

    {builder-show:mode=view|context=page}{use-layout:CF27EXTRA}{builder-show}
    {builder-show:mode=view|context=page|hastitle=@home}{use-layout:CF27EXTRAHOME}{builder-show}
    

    Context=page has the expected effect of keeping sidebars out of the global context but the sidebar appears in a all modes within the space. I haven't managed to check for the home page so the right sidebar never seems to appear.

    I don't want to use the page name for identifying the home page.

    Is it even possible to use multiple, mutually exclusive, builder-show -statements in the header? Should I for some kind of velocity if-else approach?

    Any tips on how I should proceed?

    r. Ville


  • Adaptavist Theme Builder Powered by Atlassian Confluence