WikiPakk Configuration

• 1: Use a Configuration Site
• 2: How to use the settings list and move the page tree button to the left
• 3: Applying Custom Styles

1 - Use a Configuration Site

Dedicate a site to WikiPakk, to

• store the WikiPakk license key,
• configure WikiPakk settings, and
• store optional telemetry data.

The configuration site will contain lists supporting those tasks.

Find more information in the following sections where - as a sample - you’ll set up https://COMPANY.sharepoint.com/sites/wikipakk-config as dedicated configuration site.

Setting up the WikiPakk Configuration Site

Create a new SharePoint site, or choose an existing one.

Point WikiPakk to the configuration site via a SharePoint storage entity (a.k.a tenant property).

One option to set a storage entity is via PnP PowerShell.

You need:

• PowerShell 7
• with the PowerShell module PnP.PowerShell installed
• a user account that is in the Owners group of the tenant app catalog site (or site collection admin there)

Here’s a script that will connect to SharePoint and set the storage entity used by WikiPakk:

Connect-PnPOnline `
    -Url https://COMPANY.sharepoint.com `
    -Interactive # ^ use any other site if you don't have access to the root site
Set-PnPStorageEntity `
    -Key "wikipakk.licensesiteurl" `
    -Value "https://COMPANY.sharepoint.com/sites/wikipakk-config" `
    -Description "WikiPakk configuration, where to find the current license key" `
    -Scope Tenant
# Get-PnPStorageEntity # <- use this to list all configured storage entities

License Key Storage and Lookup

After you set up the configuration site, WikiPakk (in our sample) will look for the license key in the Site Pages library of site https://COMPANY.sharepoint.com/sites/wikipakk-config (in addition to two other locations).

Read more about storing the license key here: WikiPakk Licensing

WikiPakk Settings

After you set up the configuration site, you can use WikiPakk to create a settings list, to configure aspects of WikiPakk.

Create a settings list as follows:

1. open the configuration site in the browser; make sure you have site owner permissions
2. add WikiPakk to the configuration site
3. navigate to the home page of the configuration site; wait a moment for WikiPakk to appear; refresh the page a couple of times until the Page Tree button appears
4. click the Page Tree button in the upper right corner, to show the page tree panel
5. in the page tree panel, below the page tree, click the question mark ? to open the About dialog
6. in the About dialog, click WikiPakk Settings, then click Check settings list setup status to verify that the list is not yet set up
   • note: if the settings list is already set up, click View Settings List to navigate to the settings list and skip the next setp
7. click Ensure WikiPakkSettings list exists in current(!) site (REQUIRES SITE OWNER PERMISSIONS) - this will create the settings list:
   
8. after creating the settings list, open Site Contents of the configuration site - it should now show the WikiPakkSettings list:
   

In our sample, the path should be https://COMPANY.sharepoint.com/sites/wikipakk-config/Lists/WikiPakkSettings.

To use a setting, add a new list item to the WikiPakkSettings list.

Use one of the above settings keys as Setting Key and set the Setting Value as well, here to change the label of the News node to German:

Caching Note

Settings are cached up to 24 hours by WikiPakk. Thus, after changing a setting, it will take up to 24 hours for the setting to take effect.

You can speed that up by clearing the browser cache, or (using the browser’s developer tools) deleting the local storage entry wikipakk.settings:

Settings Reference

The following settings are available:

News Node Settings

Read more about News node configuration: News Node.

Page Tree Panel Settings

Page Tree Button Position Settings

tree.button.position.css examples:

Anchor the button inside an element matched by a CSS selector, with offsets:

#pageHeader | top: 8px | right: 16px

Provide multiple fallback selectors (one per line). The first matched element wins:

[data-automation-id="PageHeader"] | top: 8px | right: 16px
.mainContent | top: calc(10px + 1vh) | left: 12px

Offsets support CSS calc() expressions. Available offset properties are top, left, and right.

Page Behavior Settings

CSS Setting

wikipakk.css example — hide the page tree button on small screens:

@media (max-width: 768px) {
  [data-testid="wikipakk-page-tree-button"] {
    display: none !important;
  }
}

License Setting

Telemetry

If you choose to opt into collecting telemetry data, it will be stored in the configuration site.

Refer to the Telemetry documentation for details.

2 - 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

3 - Applying Custom Styles

WikiTraccs allows you to change its style by applying custom CSS.

Do the following to load your custom CSS:

1. Set up a Configuration Site
   • note: see Use a Configuration Site for details
2. Create the WikiPakkSettings list in the Configuration Site
   • note: see WikiPakk Settings for details
3. Add the wikipakk.css setting key; set its value to the custom CSS selectors you want to apply
   • note: see the Settings Reference section for details; also take note of the settings cache duration

After the settings cache expires (or you manually clear it), your custom CSS should be applied.