Getting Started
Overview
Introducing the New Navigation Design Studio: Enhance Your Site Navigation Experience
We are excited to announce the launch of our new Navigation Design Studio, designed to revolutionize the way you manage and customize site navigation in SharePoint Online. With an intuitive and user-friendly interface, the Navigation Design Studio provides enhanced capabilities for editing and creating mega menus and matrix navigation, making it easier than ever to create a seamless and engaging user experience.
Prerequisites
Please note that the installation and configuration of the Navigation Studio require permissions from a tenant administrator. Reach out to your SharePoint administrator or IT team to initiate the installation process and unlock the full potential of the Navigation Design Studio.
SharePoint App Catalog must exist Note: It is advised to create the app catalog at least 30 minutes before the installation, else it can easily happen, that the app deployment & installation fails because the app catalog is not yet ready (even if the app site catalog collection is already created).
Installation Steps - Navigation Design Studio app
Open a web browser and go to the following URL: https://navigation-station.azurewebsites.net/.
If you are already logged in with an SharePoint admin account, the website will redirect you to a page to register for the app. Proceed to step 4.
If you are not logged in, you will be prompted to log in first. Enter your admin credential and click the "Log In" button.
After logging in, you will be redirected to the registration page for the app. This page will request your permission to access certain information and perform actions on your behalf. Read the permissions carefully to understand what the app will have access to.
On the registration page, you will also need to choose your region to ensure compliance with your data management policies. Select the appropriate region from the provided options.
Once you have selected your region or provided the necessary information, click on the "Register" button to complete the registration process.
If you agree with the permissions requested, click on the "Consent" button to grant the necessary permissions to the app.
After completing the registration, you will be redirected to the main page or dashboard of the Navigation Design Studio app. From here, you can start exploring and utilizing the app's features for managing site navigation.
Installation Steps - SPFX app
Open a web browser and go to the following URL to download the latest version of the SPFx app: https://files.intranet.livetiles.io/megamenu/Apps/LiveTiles.MegaMenu.sppkg
Save the downloaded file to a location on your computer that you can easily access.
Once the download is complete, go to the site catalog of the site where you want to use the app. Alternatively, you can use your tenant app catalog if you want to make the app available for your entire organization.
Upload the SPFx app file (sppkg) to the site catalog. This can usually be done by selecting the "Upload" or "Add" option in the site catalog interface and browsing for the downloaded file on your computer.
After the upload is complete, go to the SharePoint Admin Preview Center and navigate to the API Management node. Check if there are any pending access permissions related to the app. If there are, review and approve them to ensure the app functions correctly.
After approving the api access in SharePoint, you have to grant admin consent for any permission requests related to the app, Please go to the following URL. Review the permissions requested and proceed with consenting to grant the necessary permissions.
Now, go to the site content of the specific site where you want to add the app. Click on the "New" option and then select "Add" from the dropdown menu.
In the "Add an app" page, you should see the LiveTiles MegaMenu app listed. Click on the app to select it.
Click the "Add" button to initiate the installation of the app on the selected site.
Once the installation is complete, you can go back to the Navigation Design Studio and configure the app's settings according to your preferences.
Please note that the actual steps and options may vary slightly depending on the specific interface and functionality of the SharePoint site catalog, SharePoint Admin Preview Center, and the app itself. The provided guide is a general outline based on the information provided.
Post Installation issues
When you finish all these steps and try accessing the "Navigation Design Studio app" and having the "Access denied" page. Please do the following:
On your browser go to "Enterprise application" on your "Azure Ad", find and select the "LiveTiles-Backoffice-API".
Find a menu option "Users and groups", and make sure that your user is present there and has a "Admins" or "Editors" role, if not please select it and press the "Edit assignment" button on the top. And assign you a more appropriate role "Admins" or "Editors".
Once done that you can get back to the app and refresh the page, if the "Access danied" page persists please clean the site data. To do that press F12, chose Application tab, and on Storage press "Clean Site data" button.