Is there a button to switch layout?

In A multi-column Layout / Storyview - #263 by TW_Tones I learnt that we can add new layout and switch between them using keyboard shortcut ctrl-shift-L.

I think different layouts are different views of the same knowledgebase. So I believe there will be layouts like excalidraw layout and timeline layout in the future, just like the Heptabase app.

Here comes the question, how to switch layout using a page control button? Especially on the mobile phone?

See https://tiddlywiki.com/#Alternative%20page%20layouts for detail on how layouts are configured.

You can use a dropdown or a button that changes the value of $:/Layout. Available layouts are tagged $:/tags/Layout

Thanks, but why that button is not in the core?

The layout mechanism is relatively new, not used by the core itself thus far and there are few if any third party layouts available. As such, there hasn’t been a need for a core UI affordance for switching layouts apart from the keyboard shortcut, nor are usage patterns particularly clear yet.

I think that any well thought out PR for such a UI for the core would be well received. The challenge is of course to handle multiple layouts - that is more than two - in a user friendly manner on desktop and mobile devices.

JanJo has made such a button!
Let me just find the link in the multi column thread.

@Ste_W agreed!

Keep in mind since each layout presents the User Interface differently, the button most likely is available in a different location in each layout. If you look at @BurningTreeC recent multi-column layout as an example.

This is where knowing and memorising the short cut keys ctrl-shift-L is helpful and important if you use one or more layouts.

Not with standing this I think we should encourage all layout designers to include the way to change “away from” the layout visually/button and ideally in a somewhat consistent way for all layouts (as much as possible). In this case the core support will promote consistency.

@saqimtiaz

I had asked crazko about making it easy to switch between horizontal and other TW layouts in this discussion.

There he asked this


I didn't find much info about $:/layout or $:/tags/Layout. Can you provide some source?

Is there any more documentation available other than the one you shared above.

https://tiddlywiki.com/#Alternative%20page%20layouts

  • Searching for “layout” in shadows we find a lot of tiddlers;

I found an action send message tm-show-switcher in $:/core/ui/KeyboardShortcuts/switcher which containes <$action-sendmessage $message="tm-show-switcher" switch="layout"/> which is not documented on TiddlyWiki.com but defined in $:/core/modules/startup/rootwidget.js

We can trigger this from a button widget;

<$button>
<$action-sendmessage $message="tm-show-switcher" switch="layout"/>
Change layout
</$button>

I see the layout switcher sets the “page layout tiddler” in $:/layout However I see this javascript does a lot to restart the wiki SO I expect you will always have to use the “tm-show-switcher” message and select from the available layouts.

Does this give you what you need?

I also found $:/snippets/LayoutSwitcher which is the same switcher as in the control panel.

This is the dialogue or modal used to select the layout. The selected item is set into $:/layout using the linkcatcher widget.

As I understand it the javascript module is loaded at startup and is “listening” …

Other can perhaps help but are you fine now with a button as above in my last post?

Ah ha

Finally, I see if you place {{$:/snippets/LayoutSwitcher}} in a tiddler you can just click the layout and it changes, you could add $:/tags/SideBarSegment and perhaps with a list-after field with $:/core/ui/SideBarSegments/search and you can select a layout with a click from the sidebar.

Documentation on what precisely though? It isn’t apparent to me from that Github discussion as to what precisely there is a need for more information on.

you can write to the $:/layout tiddler:

<$button set="$:/layout" setTo="myview">new view</$button>

where myview is your alternative page template

@buggyj did you test thaat?

Any widget or UI affordance that changes the value of the $:/layout tiddler can be used to switch between layouts.

In crazko’s reply in GitHub, he was asking about $:/layout and$:/tags/Layout

I don’t have enough knowledge about those things. That’s why I asked here in the forum.

Anyways I have asked him to look at this discussion in the forum

Start here for the documentation which is minimal so far https://tiddlywiki.com/#Alternative%20page%20layouts

To create an alternative page layout and have the ability to switch to it, you need to create an alternative page template “Clone $:/core/ui/PageTemplate” tiddler with the SystemTag: $:/tags/Layout.

yes this is what I use in my TW

Now we have that button in v5.2.5

Just enable it in ControlPanel - Appearance - Page Toolbar

As suggested in Feat/button default layout by linonetwo ¡ Pull Request #7197 ¡ Jermolene/TiddlyWiki5 ¡ GitHub you can have a unique icon field in layout tiddler, to make your layout easily recognizable in the list.