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

1 Like

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

1 Like

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.

1 Like

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

2 Likes

@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.

1 Like

@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.

2 Likes

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

2 Likes

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.