Designing Role Centers: Creating Navigation Menu and Navigation bar - Step by step tutorial - Role Centers Part 1

Introduction

In this blog, I'll specifically focus on the Navigation menu and Navigation bar within the Role Center of Microsoft Dynamics 365 Business Central. These components are vital for enhancing user experience by providing structured and easy access to essential tasks and data, thereby boosting productivity across different roles within an organization. 

The Role Center in Microsoft Dynamics 365 Business Central stands as the cornerstone of a personalized and efficient workspace, tailored specifically to enhance productivity and streamline operations for various roles within an organization. As the primary dashboard for users, the Role Center is meticulously designed to support a role-tailored experience, providing immediate access to essential tasks and data. In this blog, we'll explore the intricate design of the navigation menu and navigation bar, essential components that enable seamless user interaction and task management.

About the Role Center

The Role Center acts as the gateway to Dynamics 365, serving as the default homepage tailored to the user’s role within the company. Whether it's a business owner, department lead, or an information worker, each Role Center is customized to meet the specific needs and priorities of different user profiles. The design of each Role Center revolves around user-centric principles, aimed at displaying pertinent information and facilitating quick access to frequent tasks and data, all structured within a Role Center page.

Role Center Structure

Defined by a page with the PageType property set to RoleCenter, the layout is divided into two principal areas: the navigation/actions area and the content area. This strategic division is designed to enhance user experience by separating interactive elements from informational content, thus streamlining workflows and improving accessibility.

PageType = RoleCenter;

Navigation in the Role Center

1. Navigation Menus

Description: Navigation menus in Dynamics 365 Business Central serve as the top-level navigation system. They consist of one or more root menu items that expand to display links to other pages. These links can be organized into submenus, creating a logical and hierarchical structure that simplifies user interaction.

Usage Guidelines:

• Strategic Placement: Root items should be placed in order of importance from left to right. This aligns with the natural reading order and helps users quickly find the most important sections.
• Logical Grouping: Links should be grouped into submenus to reduce clutter and enhance discoverability. For instance, a business manager’s top-level menu might include finance, sales, and purchasing.
• Role-Specific Access: The navigation should reflect the specific needs and tasks of the user’s role, providing direct access to relevant entity lists and frequently used functions.

Technical Implementation: Developers define this area using an area(Sections) control in the page code. This allows for the modular addition of menu items and ensures that the navigation structure can be easily modified to suit changing business needs.

page 50125 MyRoleCenter { PageType = RoleCenter; Caption = 'My Role Center';

actions { area(Sections) { group(PostedInvoices) { Caption = 'Posted Invoices'; Image = RegisteredDocs; action(PostedServiceInvoices) { Caption = 'Posted Service Invoices'; RunObject = Page "Posted Service Invoices"; ApplicationArea = All; } action(PostedSalesInvoices) { Caption = 'Posted Sales Invoices'; RunObject = Page "Posted Sales Invoices"; ApplicationArea = All; } group(SalesDocuments) { Caption = 'Sales Documents'; action("Sales Document Entity") { ApplicationArea = All; RunObject = page "Sales Document Entity"; } action("Sales Document Line Entity") { ApplicationArea = All; RunObject = page "Sales Document Line Entity"; } } } }

} } // Creates a profile that uses the Role Center profile MyProfile { ProfileDescription = 'Sample Profile'; RoleCenter = MyRoleCenter; Caption = 'My profile'; }

Code Explanation

• Page 50125 MyRoleCenter: This block begins the definition of a new page with ID 50125 named "MyRole Center".
• PageType = RoleCenter: Specifies that the page type is a Role Center, which is typically used as a dashboard for users to access key functionalities quickly.
• Caption = 'My Role Center': Sets the title of the page as seen by users.

• Actions

  The actions block defines interactive elements (buttons, links, etc.) that users can engage with. It's organized into different areas, each serving a specific function:

  1. Sections

     • Group (PostedInvoices): This group organizes actions related to viewing different types of posted invoices.
       • Caption = 'Posted Invoices': Sets the group's title.
       • Image = RegisteredDocs: Assigns an icon from the system for visual representation.
       • Actions within the group:
         • PostedServiceInvoices: Menu to navigate to the "Posted Service Invoices" page.
         • PostedSalesInvoices: Menu to navigate to the "Posted Sales Invoices" page.
         • Group (SalesDocuments): A subgroup for actions related to sales document entities.
           • Sales Document Entity: Opens the "Sales Document Entity" page.
           • Sales Document Line Entity: Opens the "Sales Document Line Entity" page.

2. Navigation Bar

Description: The navigation bar in Dynamics 365 Business Central appears as a second-level navigation tool. It displays a flat list of links that lead directly to important pages. Unlike the top-level menus, the navigation bar provides quick access to specific areas without nested structures.

Usage Guidelines:

• Direct Access: Use the navigation bar to link directly to the most frequently needed entity lists or operational pages. For example, links to customers, sales orders, and bank accounts can be crucial for a business manager.
• Business Process Sequence: Arrange items in an order that mirrors the sequence of the business process, making it intuitive for users to navigate through tasks.
• Simplicity and Clarity: Limit the number of items to avoid overwhelming users. Consider integrating some links into the top-level navigation if the bar becomes too crowded.

Technical Implementation: This area is defined using an area(embedding) control in the page code, facilitating the straightforward addition of links and allowing for dynamic updates as business processes evolve.

page 50125 MyRoleCenter { PageType = RoleCenter; Caption = 'My Role Center'; actions { area(Embedding) { action(Sales) { Caption = 'Sales lists'; RunObject = Page "Sales list"; ApplicationArea = All; } action(Services) { Caption = 'Service lists'; RunObject = Page "Service list"; ApplicationArea = All; } }

} } // Creates a profile that uses the Role Center profile MyProfile { ProfileDescription = 'Sample Profile'; RoleCenter = MyRoleCenter; Caption = 'My profile'; }

Profile Definition

• profile MyProfile: Defines a new user profile.
  • ProfileDescription = 'Sample Profile': Provides a description of what this profile is intended for.
  • RoleCenter = MyRoleCenter: Links this profile to the previously defined Role Center page, making it the default landing page for users assigned to this profile.
  • Caption = 'My profile': Sets the display name of the profile.

Video Tutorial:

Code Reference: GitHub

Conclusion

The navigation menu and navigation bar are key to fostering an environment of efficiency and accessibility within the Role Center of Dynamics 365 Business Central. By effectively leveraging these tools, organizations can greatly enhance their operational workflow, ensuring that users have immediate access to the tools and information they need. As developers, emphasizing role-tailored design and intuitive navigation setups in your Role Center implementations can make a significant difference in both productivity and user satisfaction.

See you soon in the next blog on creating Action bars.

Comment "Yes" if you need a quiz on the role center page to enrich your knowledge.👍

Take care.😀