Skip to content

Commit 6c64f95

Browse files
juanigalan91juanigalan91
authored
Merge pull request #9 from lumapps/chore/CF-725_add_doc_for_error_pages
chore(error-pages): add error page customization
2 parents 7025b22 + db8c166 commit 6c64f95

File tree

7 files changed

+135
-3
lines changed

7 files changed

+135
-3
lines changed

‎docs/javascript/api.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,20 +57,21 @@ And `configuration` is an object that allows these properties:
5757
| `targets.CONTEXTUAL_ACTIONS` | Target id for the contextual actions menu on the right hand side of a content page. | [Documentation](./capabilities#contextual-actions) |
5858
| `targets.CONTRIBUTION_MENU` | Target id for the contribution menu. | [Documentation](./capabilities#contribution-menu) |
5959
| `targets.CONTRIBUTION_BUTTON` | Target id for the contribution button. | [Documentation](./capabilities#contribution-button) |
60+
| `targets.ERROR_PAGE` | Target id for the error pages. | [Documentation](./capabilities#error-page) |
6061
| `targets.FAVORITES` | Target id for the favorite directories. | [Documentation](./capabilities#favorites) |
6162
| `targets.DIRECTORY` | Target id for the directory. | [Documentation](./capabilities#directory) |
6263
| `targets.HEADER` | Target id for the site's header. | [Documentation](./capabilities#header) |
6364
| `targets.LOGO` | Target id for the site's logo. | [Documentation](./capabilities#logo) |
6465
| `targets.NAVIGATION` | Target id for the main navigation. | [Documentation](./capabilities#navigation) |
65-
| `targets.LOGO` | Target id for the site's logo. | [Documentation](./capabilities#logo) |
66-
| `targets.NAVIGATION` | Target id for the main navigation. | [Documentation](./capabilities#navigation) |
67-
| `targets.NAVIGATION_UI` | Target id for the main navigation's UI. | [Documentation](./capabilities#navigation) |
66+
| `targets.NAVIGATION_UI` | Target id for the main navigation's UI. | [Documentation](./capabilities#navigation) |
67+
| `targets.NOT_FOUND_PAGE` | Target id for the not found error page (error code 404). | [Documentation](./capabilities#not-found-page) |
6868
| `targets.NOTIFICATIONS_BUTTON` | Target id for the notifications center component. | [Documentation](./capabilities#header) |
6969
| `targets.PAGE` | Target id for all pages. | [Documentation](./capabilities#page) |
7070
| `targets.PROFILE` | Target id for the profile page. | [Documentation](./capabilities#profile) |
7171
| `targets.SEARCH` | Target id for the search page. | [Documentation](./capabilities#search) |
7272
| `targets.SEARCH_BOX` | Target id for the search box. | [Documentation](./capabilities#search-box) |
7373
| `targets.SEARCH_CUSTOM_METADATA` | Target id for search custom metadata. | [Documentation](./capabilities#search-custom-metadata) |
74+
| `targets.SEARCH_TAB` | Target id for search tab. | [Documentation](./capabilities#search-tab) |
7475
| `targets.SETTINGS` | Target id for the settings menu. | [Documentation](./capabilities#settings) |
7576
| `targets.SETTINGS_BUTTON` | Target id for the settings icon on the top bar. | [Documentation](./capabilities#settings-button) |
7677
| `targets.STICKY_HEADER` | Target id for the sticky header. | [Documentation](./capabilities#sticky-header) |

‎docs/javascript/assets/target-error-pages.png

44 KB
Loading

‎docs/javascript/assets/target-search-tab.png

175 KB
Loading

‎docs/javascript/assets/use-case-customized-not-found-error-page.png

22.8 KB
Loading

‎docs/javascript/assets/use-case-search-tab-with-icon.png

4.13 KB
Loading

‎docs/javascript/capabilities.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,24 @@ Target that allows customizing the [directory](https://docs.lumapps.com/docs/exp
254254

255255
- [Display a message above all pages of a certain type](./use-cases#display-a-message-above-all-pages-of-a-certain-type)
256256

257+
### Error page
258+
259+
Target that allows customizing the error pages.
260+
261+
![Target Error page](./assets/target-error-pages.png 'Target Error page')
262+
263+
#### Compatibility
264+
265+
| | |
266+
| ------------- | ------------------------------------------------------ |
267+
| Target ID | `error-page` |
268+
| Description | Target for the error pages (all but 404) of your site. |
269+
| Placements | Compatible with placements: `REPLACE`. |
270+
| Disable | No compatibility |
271+
| Changing text | No compatibility |
272+
273+
**Note:** Using `context` it is possible to retrieve the `redirectButtonProps` which includes href, emphasis and translated label, allowing to reuse the default redirect button (if any) of each error page.
274+
257275
### Favorites
258276

259277
Target that allows customizing the [favorites directories](https://docs.lumapps.com/docs/explore-l8658525737805197modules) displayed on the top bar.
@@ -340,6 +358,28 @@ There are two targets that focus on the main navigation, each of them have a dif
340358
- [Hide the entire navigation on your site](./use-cases#hide-the-entire-navigation-on-your-site)
341359
- [Create a custom navigation for your site](./use-cases#create-a-custom-navigation-for-your-site)
342360

361+
### Not found page
362+
363+
Target that allows customizing the not found page (404 error code).
364+
365+
![Target Not found page](./assets/target-error-pages.png 'Target Not found page')
366+
367+
#### Compatibility
368+
369+
| | |
370+
| ------------- | -------------------------------------------------- |
371+
| Target ID | `not-found-page` |
372+
| Description | Target for the not found pages (404) of your site. |
373+
| Placements | Compatible with placements: `REPLACE`. |
374+
| Disable | No compatibility |
375+
| Changing text | No compatibility |
376+
377+
**Note:** Using `context` it is possible to retrieve the `redirectButtonProps` which includes href, emphasis and translated label, allowing to reuse the default redirect button (if any) of each error page.
378+
379+
#### Use cases
380+
381+
- [Customize not found page error message](./use-cases#customize-not-found-page-error-message)
382+
343383
### Notifications button
344384

345385
Targets that allows customizing the [notifications center button](https://docs.lumapps.com/docs/docs/explore-landing/explore-l03614667337598343notifications/explore-l056033737398520134notifications)
@@ -477,8 +517,28 @@ Target that allows customizing the search custom metadata.
477517
| Disable | No compatibility. |
478518
| Changing text | No compatibility. |
479519

520+
### Search tab
521+
522+
Target that allows customizing the search tab.
523+
524+
![Target search tab](./assets/target-search-tab.png "Target search tab")
525+
526+
#### Compatibility
527+
528+
| | |
529+
| ------------- | -----------------------------------|
530+
| Target ID | `search-tab` |
531+
| Description | Target the search tab. |
532+
| Placements | Compatible with placements: `LEFT` |
533+
| Disable | No compatibility. |
534+
| Changing text | No compatibility. |
535+
536+
**Note:** Using `context` it is possible to retrieve the `id` of each tab displayed in the search result page.
537+
480538
#### Use cases
481539

540+
- [Display an icon next to each search tab](./use-cases#display-an-icon-next-to-each-search-tab)
541+
482542
### Settings button
483543

484544
Target that allows customizing the settings icon displayed on the top bar.

‎docs/javascript/use-cases.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -813,3 +813,74 @@ window.lumapps.customize(({ api, components, render, constants, placement, targe
813813
});
814814
```
815815

816+
## Display an icon next to each search tab
817+
818+
One way to make search tab easier to differenciate is to add an icon next to each tabs. By using search tab id, it is possible to add an icon on the left side of the tab label. Tab id can be retrieved from the search call response within the `tabs` array.
819+
820+
```js
821+
window.lumapps.customize(({ targets, components, render, placement }) => {
822+
const { Icon } = components;
823+
const tabs = [
824+
{ uid: 'all', icon: 'home-circle' },
825+
{ uid: 'drive', icon: 'google-drive' },
826+
];
827+
828+
render({
829+
placement: placement.LEFT,
830+
target: targets.SEARCH_TAB,
831+
toRenderWithContext: id => {
832+
// search in tabs object if an id matches with the id of a tab that should to have an icon
833+
const tabToFormat = tabs.find(tab => tab.uid === id);
834+
// if no match have been found return to avoid unnecessary warnings
835+
if (tabToFormat === undefined) return;
836+
return Icon({
837+
icon: tabToFormat.icon,
838+
className: 'search-filters-tab__custom-tab-icon',
839+
});
840+
},
841+
});
842+
});
843+
```
844+
845+
![Use case search tab with icon](./assets/use-case-search-tab-with-icon.png "Use case search tab with icon")
846+
847+
## Customize not found page error message
848+
849+
It is possible to customize not found error page using our design system components. If you only wish to change the error message while keeping the go back home button, you can retrieve the button props from the context and only change the rest of the page.
850+
851+
```js
852+
window.lumapps.customize(({ targets, components, render, placement, constants }) => {
853+
const { Message, Icon, FlexBox, Button } = components;
854+
const { Orientation, Alignment, Kind, Size } = constants;
855+
856+
render({
857+
placement: placement.REPLACE,
858+
target: targets.NOT_FOUND_PAGE,
859+
toRenderWithContext: ({ button }) =>
860+
FlexBox({
861+
children: [
862+
Icon({ size: Size.xl, hasShape: true, icon: 'file-question', key: 'icon' }),
863+
Message({
864+
kind: Kind.warning,
865+
hasBackground: true,
866+
children:
867+
'Something got wrong... If this is not coming from a wrong URL, please reach your administrator.',
868+
key: 'message',
869+
className: 'lumx-spacing-margin-top-big',
870+
}),
871+
Button({
872+
key: 'button',
873+
className: 'lumx-spacing-margin-top-big',
874+
...button,
875+
leftIcon: 'home',
876+
}),
877+
],
878+
orientation: Orientation.vertical,
879+
vAlign: Alignment.center,
880+
}),
881+
});
882+
});
883+
```
884+
885+
![Use case customized not found error page](./assets/use-case-customized-not-found-error-page.png "Use case customized not found error page")
886+

0 commit comments

Comments
 (0)