How to use the settings list and move the page tree button to the left

This video shows how to configure WikiPakk to show the SharePoint page tree button and panel on the left side of the page, instead of the default right side. It also demonstrates an advanced configuration that moves the SharePoint page tree button out of the top bar entirely and anchors it on an arbitrary element within the page, such as the page title area.

Video Sections

1. 00:00 Intro
2. 00:33 Adding WikiPakk to a site and waiting for the page tree button to appear in the upper right corner.
3. 00:58 Creating the WikiPakk settings list in the WikiPakk configuration site (/sites/WikiPakkConfiguration). WikiPakk provides a helper to create the list via the ? dialog in the page tree panel.
4. 02:43 Configuring WikiPakk to show the button on the left by adding a setting with key tree.panel.openFrom and value left.
5. 03:15 Clearing the settings cache via the browser developer tools (F12 > Application > Local Storage > delete the wikipakk.settings entry) to apply changes immediately, instead of waiting for the cache to expire.
6. 04:09 Seeing the button on the left side - the button and panel now slide out from the left.
7. 04:28 Advanced: anchoring the button in the page title area using two additional settings (see Settings Reference):
   • tree.button.position with value fixed
   • tree.button.position.css with CSS selectors to find the target element, plus margin definitions
8. 06:26 Seeing the button in the title area and words of caution - anchoring the button on page elements requires CSS knowledge. Since those elements are owned by Microsoft, they can change with SharePoint updates. If the target element cannot be found, the button falls back to its default top bar position.
9. 07:18 Outro