Top Panel

The following page is displayed if the Top panel v1 is active:

5. In the "Layout" selector, you can select which version of the top panel should be active; version 1 or version 2. In this case, we select "Top panel v1".
6. In the "Solution Title localizations" section, you can create translations for the solution title label shown in the "Home" menu of the solution, as shown in the following image:

7. The "Navigation bar color" selector allows you to select a background color for the top panel. You can either type in a Hex color code in the field, or use the color picker to select a color.
8. The "Navigation text color" selector allows you to select a text color for the top panel. You can either type in a Hex color code in the field, or use the color picker to select a color.

The color picker works as follows:

9. Click the color picker button to open the color picker.
10. Click anywhere in the large color selector window to select a color.
11. You can use the eyedropper tool to copy a color from anywhere on your screen.
12. The circle shows a preview of the color you have selected.
13. Click and drag on the color spectrum to make more colors available in the large color selector.
14. You can type in values for R (red), G (green), and B (blue) if you know the exact color values you wish to use
15. Click this button to change input modes (instead of inputting values for red, green, and blue, you can input a HEX color code, or values for H (hue), S (saturation), and L (lightness).

For demonstration purposes, we have selected the following colors for the background and text:

16. Click the "Save Top panel" button to save the configuration.

Upon saving the configuration, you will be taken to the WorkPoint Administration dashboard:

17. The "Success" message lets us know that the configuration was successfully saved.

We now need to clear the WorkPoint 365 browser cache for the changes to become visible on the solution:

18. First, we note that the top panel still has the standard white background.
19. We now click the "Home" button on the solution.

20. In the bottom of the left side menu, we click "Need help?".
21. In the pop-up, we select "Clear  WorkPoint 365 browser cache".

The page now reloads the the colors we selected for background and text should appear in the top panel:

As we can see, the top panel background is now a light blue color, and the text is dark blue - just like we configured. We can also see the classic version of the top panel.

The following page is displayed if the Top panel v2 is active:

22. In the "Layout" selector, you can select which version of the top panel should be active; version 1 or version 2. In this case, we select "Top panel v2".
23. In the "Entity Navigation Visibility" option, you can select to hide or show the list/library and submodule navigation elements displayed when expanding an entity in the top panel breadcrumb. The following image shown examples of both settings:

Shown:

Hidden:

24. In the "Solution Title localizations" section, you can add translations of the WorkPoint solution title. This title is displayed in the top of the Home menu, when expanded. In this case, we have added one for English, but we could add one for multiple other languages if people from different locations were to use the same WorkPoint solution. The location of the Solution Title is shown in the following image:

25. The "Navigation bar color" selector allows you to select a background color for the top panel. You can either type in a Hex color code in the field, or use the color picker to select a color.
26. The "Navigation text color" selector allows you to select a text color for the top panel. You can either type in a Hex color code in the field, or use the color picker to select a color.

The color picker works as follows:

27. Click the color picker button to open the color picker.
28. Click anywhere in the large color selector window to select a color.
29. You can use the eyedropper tool to copy a color from anywhere on your screen.
30. The circle shows a preview of the color you have selected.
31. Click and drag on the color spectrum to make more colors available in the large color selector.
32. You can type in values for R (red), G (green), and B (blue) if you know the exact color values you wish to use
33. Click this button to change input modes (instead of inputting values for red, green, and blue, you can input a HEX color code, or values for H (hue), S (saturation), and L (lightness).

For demonstration purposes, we have selected the following colors for the background and text:

34. We click the "Save Top panel" button to save the configuration.

Upon saving the configuration, you will be taken to the WorkPoint Administration dashboard:

35. The "Success" message lets us know that the configuration was successfully saved.

We now need to clear the WorkPoint 365 browser cache for the changes to become visible on the solution:

36. First, we note that the top panel still has the standard white background.
37. We now click the "Home" button on the solution.

38. In the bottom of the left side menu, we click "Need help?".
39. In the pop-up, we select "Clear  WorkPoint 365 browser cache".

The page now reloads the the colors we selected for background and text should appear in the top panel:

As we can see, the top panel background is now a blue color, and the text is dark gray - just like we configured.

Note that if you click an entity name in the Top panel v2, you are presented with one or more tabs displaying information about the entity.

If the entity uses a stage model, the stage model is also displayed:

These tabs can be edited and new ones can be created. This is done from the Entity Presentation settings, and will be demonstrated in the following section.

In this section, we will demonstrate how to edit and set up Entity Details tabs for the Top panel v2.

In this example case, we will edit the current Entity Detaqils tab for Projects on our Project Management solution.

For demonstration purposes, we now only have a single Entity Details tab in the panel:

We will edit the Entity Details tab to instead display an Adaptive Card presentation layout, as well as creating a new "Journal" tab showing the latest actions on the entity. Lastly, we will add a "Stage Details" tab to show us information about stages for the project:

40. In the WorkPoint Administration, click the header of the business module of which you wish to set up the top panel tabs. In our case, that is the "Projects" business module.
41. In the menu, click "Entity Presentation Settings".

This opens the Entity Presentation Settings page for the Projects business module:

42. In this demonstration, we currently have three entity presentation layouts. The one we want to use in the "Entity Details" tab is the "AC Presentation Layout".
43. Since Top panel v2 is currently active, the "Entity detail tabs" section appears in the Entity Presentation Settings page.

To edit the current "Entity Details" tab, we can click it in the tabs list:

44. We activate the "Entity Details" tab by clicking it in the tabs list.
45. We can now edit the name of the tab. In this case, we leave the tab name as is.
46. For tab type we can either select "Entity Presentation" or "Journal". Since we want to display an entity presentation layout, we leave this field as is.
47. For "Presentation Layouts", we can selected between the existing layouts. Here, we can now select the "AC Presentation Layout":

We can now create the "Journal" tab:

48. To add a new tab, click the "Add tab" button.

49. For "Tab name" we type in "Journal".
50. If we want to create localization for the tab name, we click the globe icon and provide the relevant translations.
51. For tab type, we select "Journal".

Lastly, we can create our Stage Details tab:

52. We click the "Add tab" button.

53. We name the tab "Stage Details".
54. For "Tab type", we select "Stage Details".
55. We can now save our tab configurations.

You should now see the following message in the top of the Entity Presentation Settings page:

To view the changes to the Entity details panel, we need to clear the WorkPoint 365 browser cache:

56. On the WorkPoint solution, click the "Home" button.

57. In the bottom of the side panel, click "Need help?".
58. Click "Clear WorkPoint 365 browser cache".

We can now open the entity details panel again to view the changes we made:

59. We can see that the "Entity Details" tab now displays the "AC Presentation Layout" we set it to before.

60. We can also see that the "Journal" tab has been added, and it displays the latest actions on the project.

61. Lastly, we can see that the "Stage Details" tab shows us additional information about what stage we are in, as well as various other useful stage information.

To view the entity details panel which displays information such as entity meta data, follow these steps:

62. In the top panel, click the title of the entity.
63. The entity information panel opens, presenting the available entity detail tabs. The currently active tab is underscored with a color dependent on the theme of the solution.
64. The contents of the currently active tab is shown in the main section of the entity information panel.
65. In the left side panel you can access the various libraries of the entity site.

To view the stage information of the current entity, follow these steps:

66. If the entity utilizes a stage model and currently has a stage, the current stage is displayed after the entity title. You can click the title of the entity to view more information.
67. In the top of the expanded top panel, the stage model is displayed. Displayed stages depend on which stage rendering mode is configured for the business module. For more information, please visit this article. Previous stages are marked with a check mark, the current stage is marked with an arrow and a target icon. Possible future stages are unmarked.
68. If we go to the "Stage Details" tab, we can view more information about the stages of the entity.
69. If the current stage has sub-stages, these are visible in the main section of the stage panel.
70. Stage deadline information is provided below the stages overview. Deadlines more than a week from now are displayed with a standard black text. Deadlines closer than one week is displayed with an orange text and a clock icon. Overdue deadlines are displayed with a red text and an error icon.
71. Additional information about the current stage is displayed in the left side of the stage panel.
72. You can apply the stage filter by clicking the "Apply stage filter" button. This makes it so that only items created during the current stage will be displayed on the entity site.
73. You can change the current stage by clicking the "Change stage" button.