3 - Navigation Overview

📖 Task Introduction

When you open a new module, you get a three-panel view. We’ll briefly review them in this task and provide documentation links you should follow to learn more.

🔨 Task Instructions

1. The left panel of your module provides a collapsible list of icons. The four icons listed are: overview, layouts, variables, and module settings.

   • Overview is your main page containing the different widgets
   • Under layouts, you have layers of the main canvas, such as a header, page, and a section.
   • Below layouts is the variables icon. When you click on the variables icon, you'll notice that it’s currently empty, but this section will organize the variables you create to load and move data throughout your Workshop module.
   • Lastly, there is the module settings icon, which gives you access to module specific configurations we will set later in this course.

   

2. The center navigation area contains the application itself. Just above the center area, you'll find options for adding or moving page elements.

3. The right-side panel will always display the configuration options for the element selected in your module.

📚 Recommended Reading (~15 min read)

You’ll get more comfortable with these enabling features of Workshop editing as you build the application in this tutorial. Before building, take a few moments to read the documentation links below to understand the foundational building blocks you will be using.

• Layouts frame one or more sections of a module.
• Widgets are the core building blocks of a Workshop module’s user interface.
• Variables control how Objects data, filtering logic, and selection moves throughout a Workshop module.
• Events trigger specified behavior when a user takes a given action