Skip to content

Commit 768d1ef

Browse files
pabel-rhpabel-rh
authored
RHIDP-6525: Modularizing Customizing (#1056)
* Modularization * Incorporated changes
1 parent c8d6f3a commit 768d1ef

5 files changed

+147
-132
lines changed

‎assemblies/assembly-customizing-the-appearance.adoc

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,13 @@ include::modules/customizing-the-appearance/proc-customize-rhdh-theme-mode.adoc[
2525
include::modules/customizing-the-appearance/proc-customize-rhdh-branding-logo.adoc[leveloffset=+1]
2626

2727

28-
include::modules/customizing-the-appearance/proc-customize-rhdh-sidebar-menuitems.adoc[leveloffset=+1]
28+
include::modules/customizing-the-appearance/con-customize-rhdh-sidebar-menuitems.adoc[leveloffset=+1]
2929

30+
include::modules/customizing-the-appearance/proc-customize-rhdh-sidebar-menuitems.adoc[leveloffset=+2]
31+
32+
include::modules/customizing-the-appearance/proc-configuring-dynamic-plugin-menuitem.adoc[leveloffset=+2]
33+
34+
include::modules/customizing-the-appearance/proc-modifying-or-adding-rhdh-custom-menuitem.adoc[leveloffset=+2]
3035

3136
include::modules/customizing-the-appearance/proc-customizing-entity-tab-titles.adoc[leveloffset=+1]
3237

‎modules/customizing-the-appearance/con-customize-rhdh-sidebar-menuitems.adoc

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
[id='con-customize-rhdh-sidebar-menuitems_{context}']
2+
= Customizing the sidebar menu items for your {product-short} instance
3+
4+
The sidebar menu in {product} consists of two main parts that you can configure:
5+
6+
Dynamic plugin menu items:: Your preferences and your active plugins define dynamically one part of the sidebar menu.
7+
Main menu items:: The core navigation structure of sidebar is static.
8+
9+
* *Dynamic plugin menu items*: These items are displayed beneath the main menu and can be customized based on the plugins installed. The main menu items section is dynamic and can change based on your preferences and installed plugins.

‎modules/customizing-the-appearance/proc-configuring-dynamic-plugin-menuitem.adoc

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
[id='proc-configuring-dynamic-plugin-menuitem_{context}']
2+
= Configuring a dynamic plugin menu item for your {product-short} instance
3+
4+
Configure a dynamic plugin menu item using the following step:
5+
6+
.Procedure
7+
8+
* In the `{my-app-config-file}` file, update the `menuItems` section of your _<plugin_name>_ plugin. For example:
9+
+
10+
[source,yaml]
11+
----
12+
dynamicPlugins:
13+
frontend:
14+
_<plugin_name>_: # <1>
15+
menuItems:
16+
<menu_item_name>: # <2>
17+
icon: # home | group | category | extension | school | _<my_icon>_ # <3>
18+
title: _<plugin_page_title>_ # <4>
19+
priority: 10 # <5>
20+
parent: favorites # <6>
21+
----
22+
<1> `_<plugin_name>_`: Enter the plugin name. This name is the same as the `scalprum.name` key in the `package.json` file.
23+
<2> `_<menu_item_name>_`: Enter a unique name in the main sidebar navigation for either a standalone menu item or a parent menu item. If this field specifies a plugin menu item, the name of the menu item must match the name using in the corresponding path in `dynamicRoutes`. For example, if `dynamicRoutes` defines `path: /my-plugin`, then `menu_item_name` must be defined as `my-plugin`.
24+
<3> `icon`: (Optional) Enter the icon name. You can use any of the following icons:
25+
** Default icons, such as `home`, `group`, `category`, `extension`, and `school`. To use default icons, set the icon as an (`" "`) empty string.
26+
** A custom icon, where _<my_icon>_ specifies the name of your custom icon
27+
** An SVG icon, such as: `icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg>`
28+
** An HTML image, such as: `icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png`
29+
<4> `title`: (Optional) Enter the menu item title. Omit it when the title is already specified in the `dynamicRoutes` configuration under `menuItem.text`. To hide the title from the sidebar, set the title as an (`" "`) empty string.
30+
// Update <4> for release 1.6 as this option (currently a workaround) would be added as a functionality. RHIDP-6333.
31+
<5> `priority`: (Optional) Sets the order in which menu items appear in the sidebar. The default priority is 0, which places the item at the bottom of the list. A higher priority value places the item higher in the sidebar. You can define this field for each section.
32+
<6> `parent`: (Optional) Enter the parent menu item under which the current item is nested. If this field is used, the parent menu item must be defined elsewhere in the `menuItems` configuration of any enabled plugin. You can define this field for each section.
33+
34+
+
35+
.Example `menuItems` configuration
36+
[source,yaml,subs="+attributes"]
37+
----
38+
dynamicPlugins:
39+
frontend:
40+
_<package_name>_:
41+
dynamicRoutes:
42+
- path: /my-plugin
43+
module: CustomModule
44+
importName: FooPluginPage
45+
menuItem:
46+
icon: fooIcon
47+
text: Foo Plugin Page
48+
menuItems:
49+
my-plugin: # <1>
50+
priority: 10 # <2>
51+
parent: favorites # <3>
52+
favorites: # <4>
53+
icon: favorite # <5>
54+
title: Favorites # <6>
55+
priority: 100 # <7>
56+
----
57+
<1> `my-plugin`: Matches the value of the `path` field in `dynamicRoutes`.
58+
<2> `priority`: Controls order of plugins under the parent menu item.
59+
<3> `parent`: Nests this plugin under the `favorites` parent menu item.
60+
<4> `favorites`: Configuration for the parent menu item.
61+
<5> `icon`: Displays the `favorite` icon from the {product-very-short} system icons.
62+
<6> `title`: Displays the title name for the parent menu item.
63+
<7> `priority`: Order of the `favourites` menu item in the sidebar.

‎modules/customizing-the-appearance/proc-customize-rhdh-sidebar-menuitems.adoc

Lines changed: 3 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
[id='proc-customize-rhdh-sidebar-menuitems_{context}']
22
= Customizing the sidebar menu items for your {product-short} instance
33

4-
The sidebar menu in {product} consists of two main parts that you can configure:
5-
6-
Dynamic plugin menu items:: Your preferences and your active plugins define dynamically one part of the sidebar menu.
7-
Main menu items:: The core navigation structure of sidebar is static.
8-
9-
* *Dynamic plugin menu items*: These items are displayed beneath the main menu and can be customized based on the plugins installed. The main menu items section is dynamic and can change based on your preferences and installed plugins.
4+
Customize the main menu items using the following steps:
105

116
.Procedure
12-
13-
. Customize the main menu items using the following steps:
14-
.. Open the `{my-app-config-file}` file.
7+
. Open the `{my-app-config-file}` file.
158
.. To customize the order and parent-child relationships for the main menu items, use the `dynamicPlugins.frontend.default.main-menu-items.menuItems` field.
169
.. For dynamic plugin menu items, use the `dynamicPlugins.frontend.<package_name>.menuItems` field.
1710

@@ -50,125 +43,4 @@ dynamicPlugins:
5043
icon: add
5144
to: create
5245
priority: 50
53-
----
54-
55-
.Procedure
56-
57-
. To configure a dynamic plugin menu item, update the `menuItems` section of your _<plugin_name>_ plugin to your `{my-app-config-file}` file. For example:
58-
+
59-
[source,yaml]
60-
----
61-
dynamicPlugins:
62-
frontend:
63-
_<plugin_name>_: # <1>
64-
menuItems:
65-
<menu_item_name>: # <2>
66-
icon: # home | group | category | extension | school | _<my_icon>_ # <3>
67-
title: _<plugin_page_title>_ # <4>
68-
priority: 10 # <5>
69-
parent: favorites # <6>
70-
----
71-
<1> `_<plugin_name>_`: Enter the plugin name. This name is the same as the `scalprum.name` key in the `package.json` file.
72-
<2> `_<menu_item_name>_`: Enter a unique name in the main sidebar navigation for either a standalone menu item or a parent menu item. If this field specifies a plugin menu item, the name of the menu item must match the name using in the corresponding path in `dynamicRoutes`. For example, if `dynamicRoutes` defines `path: /my-plugin`, then `menu_item_name` must be defined as `my-plugin`.
73-
<3> `icon`: (Optional) Enter the icon name. You can use any of the following icons:
74-
* Default icons, such as `home`, `group`, `category`, `extension`, and `school`. To use default icons, set the icon as an (`" "`) empty string.
75-
* A custom icon, where _<my_icon>_ specifies the name of your custom icon
76-
* An SVG icon, such as: `icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg>`
77-
* An HTML image, such as: `icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png`
78-
<4> `title`: (Optional) Enter the menu item title. Omit it when the title is already specified in the `dynamicRoutes` configuration under `menuItem.text`. To hide the title from the sidebar, set the title as an (`" "`) empty string.
79-
// Update <4> for release 1.6 as this option (currently a workaround) would be added as a functionality. RHIDP-6333.
80-
<5> `priority`: (Optional) Sets the order in which menu items appear in the sidebar. The default priority is 0, which places the item at the bottom of the list. A higher priority value places the item higher in the sidebar. You can define this field for each section.
81-
<6> `parent`: (Optional) Enter the parent menu item under which the current item is nested. If this field is used, the parent menu item must be defined elsewhere in the `menuItems` configuration of any enabled plugin. You can define this field for each section.
82-
83-
+
84-
.Example `menuItems` configuration
85-
[source,yaml,subs="+attributes"]
86-
----
87-
dynamicPlugins:
88-
frontend:
89-
_<package_name>_:
90-
dynamicRoutes:
91-
- path: /my-plugin
92-
module: CustomModule
93-
importName: FooPluginPage
94-
menuItem:
95-
icon: fooIcon
96-
text: Foo Plugin Page
97-
menuItems:
98-
my-plugin: # <1>
99-
priority: 10 # <2>
100-
parent: favorites # <3>
101-
favorites: # <4>
102-
icon: favorite # <5>
103-
title: Favorites # <6>
104-
priority: 100 # <7>
105-
----
106-
<1> `my-plugin`: Matches the value of the `path` field in `dynamicRoutes`.
107-
<2> `priority`: Controls order of plugins under the parent menu item.
108-
<3> `parent`: Nests this plugin under the `favorites` parent menu item.
109-
<4> `favorites`: Configuration for the parent menu item.
110-
<5> `icon`: Displays the `favorite` icon from the {product-very-short} system icons.
111-
<6> `title`: Displays the title name for the parent menu item.
112-
<7> `priority`: Order of the `favourites` menu item in the sidebar.
113-
114-
115-
. To modify a main menu item or add a custom menu item, add a section to the `default.main-menu-items` > `menuItems` section in your `{my-app-config-file}` file. Use the `default.` prefix to identify the key as a main menu item.
116-
+
117-
[source,yaml]
118-
----
119-
dynamicPlugins:
120-
frontend:
121-
default.main-menu-items:
122-
menuItems:
123-
default._<menu_group_parent_item_name>_: # <1>
124-
icon: # home | group | category | extension | school | _<my_icon>_ # <2>
125-
title: _<menu_group_parent_title>_ # <3>
126-
priority: 10 # <4>
127-
default._<menu_item_name>_: # <5>
128-
parent: _<menu_group_parent_item_name>_ # <6>
129-
icon: # home | group | category | extension | school | _<my_icon>_ # <7>
130-
title: _<my_menu_title>_ # <8>
131-
to: _<path_to_the_menu_target_page>_ # <9>
132-
priority: 100 # <10>
133-
----
134-
<1> `default._<menu_group_parent_item_name>_`: (Optional) Enter the menu group parent item name to configure static main menu items. If no `default._<menu_item_name>_` has a `parent` value set, this field is not needed.
135-
<2> `icon`: Enter the menu icon. Required for parent menu items.
136-
<3> `title`: Enter the menu group title. Required for parent menu items.
137-
<4> `priority`: (Optional) Enter the order of this menu item within its menu level.
138-
<5> `default._<menu_item_name>_`: Enter the menu item name for which you want to override the default value. Add the `default.` prefix to identify a main menu item.
139-
<6> `parent`: (Optional) Enter the parent menu item for this item. Required if <menu_item_name> is specified as the child of any menu items.
140-
<7> `icon`: (Optional) Enter the menu icon. To use the default icon, set the icon as an (`" "`) empty string.
141-
<8> `title`: (Optional) Enter the menu group title. Only required for adding a new custom main menu item. To hide a default main menu item title from the sidebar, set the title as an (`" "`) empty string.
142-
// Update <8> for release 1.6 as this option (currently a workaround) would be added as a functionality. RHIDP-6333.
143-
<9> `to`: (Optional) Enter the path that the menu item navigates to. If it is not set, it defaults to the home page.
144-
<10> `priority`: (Optional) Enter the order of this menu item within its menu level.
145-
146-
+
147-
.Example `mainItems` configuration
148-
[source,yaml]
149-
----
150-
default.main-menu-items:
151-
menuItems:
152-
default.catalog:
153-
icon: category # <1>
154-
title: My Catalog
155-
priority: 5
156-
default.learning-path:
157-
title: '' # <2>
158-
default.parentlist: # <3>
159-
title: Overview
160-
icon: bookmarks
161-
default.home:
162-
parent: default.parentlist # <4>
163-
default.references:
164-
title: References # <5>
165-
icon: school # <6>
166-
to: /references # <7>
167-
----
168-
<1> `icon`: Specifies if you want to change the icon default menu item for the catalog.
169-
<2> `title`: Specifies an empty string `" "` to hide the learning path from the default sidebar.
170-
<3> `default.parentlist`: Introduces the parent menu item.
171-
<4> `parent`: Nests home menu under the `default.parentlist` parent menu item.
172-
<5> `title`: Specifies a name for `default.references`
173-
<6> `icon`: Displays the `school` icon.
174-
<7> `to`: Redirects `default.references` to the `/references` page.
46+
----

‎modules/customizing-the-appearance/proc-modifying-or-adding-rhdh-custom-menuitem.adoc

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
[id='proc-modifying-or-adding-rhdh-custom-menuitem_{context}']
2+
= Modifying or adding a custom menu items for your {product-short} instance
3+
4+
Modify a main menu item or add a custom menu item using the following step:
5+
6+
.Procedure
7+
* In the `{my-app-config-file}` file, add a section to the `default.main-menu-items` > `menuItems` section. Use the `default.` prefix to identify the key as a main menu item.
8+
+
9+
[source,yaml]
10+
----
11+
dynamicPlugins:
12+
frontend:
13+
default.main-menu-items:
14+
menuItems:
15+
default._<menu_group_parent_item_name>_: # <1>
16+
icon: # home | group | category | extension | school | _<my_icon>_ # <2>
17+
title: _<menu_group_parent_title>_ # <3>
18+
priority: 10 # <4>
19+
default._<menu_item_name>_: # <5>
20+
parent: _<menu_group_parent_item_name>_ # <6>
21+
icon: # home | group | category | extension | school | _<my_icon>_ # <7>
22+
title: _<my_menu_title>_ # <8>
23+
to: _<path_to_the_menu_target_page>_ # <9>
24+
priority: 100 # <10>
25+
----
26+
<1> `default._<menu_group_parent_item_name>_`: (Optional) Enter the menu group parent item name to configure static main menu items. If no `default._<menu_item_name>_` has a `parent` value set, this field is not needed.
27+
<2> `icon`: Enter the menu icon. Required for parent menu items.
28+
<3> `title`: Enter the menu group title. Required for parent menu items.
29+
<4> `priority`: (Optional) Enter the order of this menu item within its menu level.
30+
<5> `default._<menu_item_name>_`: Enter the menu item name for which you want to override the default value. Add the `default.` prefix to identify a main menu item.
31+
<6> `parent`: (Optional) Enter the parent menu item for this item. Required if <menu_item_name> is specified as the child of any menu items.
32+
<7> `icon`: (Optional) Enter the menu icon. To use the default icon, set the icon as an (`" "`) empty string.
33+
<8> `title`: (Optional) Enter the menu group title. Only required for adding a new custom main menu item. To hide a default main menu item title from the sidebar, set the title as an (`" "`) empty string.
34+
// Update <8> for release 1.6 as this option (currently a workaround) would be added as a functionality. RHIDP-6333.
35+
<9> `to`: (Optional) Enter the path that the menu item navigates to. If it is not set, it defaults to the home page.
36+
<10> `priority`: (Optional) Enter the order of this menu item within its menu level.
37+
38+
+
39+
.Example `mainItems` configuration
40+
[source,yaml]
41+
----
42+
default.main-menu-items:
43+
menuItems:
44+
default.catalog:
45+
icon: category # <1>
46+
title: My Catalog
47+
priority: 5
48+
default.learning-path:
49+
title: '' # <2>
50+
default.parentlist: # <3>
51+
title: Overview
52+
icon: bookmarks
53+
default.home:
54+
parent: default.parentlist # <4>
55+
default.references:
56+
title: References # <5>
57+
icon: school # <6>
58+
to: /references # <7>
59+
----
60+
<1> `icon`: Specifies if you want to change the icon default menu item for the catalog.
61+
<2> `title`: Specifies an empty string `" "` to hide the learning path from the default sidebar.
62+
<3> `default.parentlist`: Introduces the parent menu item.
63+
<4> `parent`: Nests home menu under the `default.parentlist` parent menu item.
64+
<5> `title`: Specifies a name for `default.references`
65+
<6> `icon`: Displays the `school` icon.
66+
<7> `to`: Redirects `default.references` to the `/references` page.

0 commit comments

Comments
 (0)