Skip to content

Commit fcd1faa

Browse files
juanigalan91juanigalan91
authored
Merge pull request #15 from lumapps/chore/user-extension-points
chore(user): add extension points
2 parents e3680c1 + 3df68bd commit fcd1faa

File tree

6 files changed

+101
-33
lines changed

6 files changed

+101
-33
lines changed

‎docs/javascript/api.md

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -62,39 +62,41 @@ And `configuration` is an object that allows these properties:
6262

6363
`targets` is a key/value object that holds the available targets that can be customized on LumApps. This variable allows developers to avoid figuring out which ids to use in order to customize a specific target, and it also defines the available targets that can be customized. As of now, these are the values for this object:
6464

65-
| Target | Description | Compatibilities |
66-
|----------------------------------|-------------------------------------------------------------------------------------|--------------------------------------------------------|
67-
| `targets.APP` | Target id for application | [Documentation](./capabilities#application) |
68-
| `targets.BOOKMARKS` | Target id for the bookmarks/app launcher component | [Documentation](./capabilities#bookmarks) |
69-
| `targets.COMMUNITY` | Target id for the community pages | [Documentation](./capabilities#community) |
70-
| `targets.CONTENT` | Target id for the content page | [Documentation](./capabilities#content) |
71-
| `targets.CONTEXTUAL_ACTIONS` | Target id for the contextual actions menu on the right hand side of a content page. | [Documentation](./capabilities#contextual-actions) |
72-
| `targets.CONTRIBUTION_MENU` | Target id for the contribution menu. | [Documentation](./capabilities#contribution-menu) |
73-
| `targets.CONTRIBUTION_BUTTON` | Target id for the contribution button. | [Documentation](./capabilities#contribution-button) |
74-
| `targets.ERROR_PAGE` | Target id for the error pages. | [Documentation](./capabilities#error-page) |
75-
| `targets.FAVORITES` | Target id for the favorite directories. | [Documentation](./capabilities#favorites) |
76-
| `targets.DIRECTORY` | Target id for the directory. | [Documentation](./capabilities#directory) |
77-
| `targets.HEADER` | Target id for the site's header. | [Documentation](./capabilities#header) |
78-
| `targets.LOGO` | Target id for the site's logo. | [Documentation](./capabilities#logo) |
79-
| `targets.NAVIGATION` | Target id for the main navigation. | [Documentation](./capabilities#navigation) |
80-
| `targets.NAVIGATION_UI` | Target id for the main navigation's UI. | [Documentation](./capabilities#navigation) |
81-
| `targets.NOT_FOUND_PAGE` | Target id for the not found error page (error code 404). | [Documentation](./capabilities#not-found-page) |
82-
| `targets.NOTIFICATIONS_BUTTON` | Target id for the notifications center component. | [Documentation](./capabilities#header) |
83-
| `targets.PAGE` | Target id for all pages. | [Documentation](./capabilities#page) |
84-
| `targets.PROFILE` | Target id for the profile page. | [Documentation](./capabilities#profile) |
85-
| `targets.SEARCH` | Target id for the search page. | [Documentation](./capabilities#search) |
86-
| `targets.SEARCH_BOX` | Target id for the search box. | [Documentation](./capabilities#search-box) |
87-
| `targets.SEARCH_CUSTOM_METADATA` | Target id for search custom metadata. | [Documentation](./capabilities#search-custom-metadata) |
88-
| `targets.SEARCH_RESULT_ICON` | Target id for icons of the search result page and quick search. | [Documentation](./capabilities#search-result-icon) |
89-
| `targets.SEARCH_TAB` | Target id for search tab. | [Documentation](./capabilities#search-tab) |
90-
| `targets.SETTINGS` | Target id for the settings menu. | [Documentation](./capabilities#settings) |
91-
| `targets.SETTINGS_BUTTON` | Target id for the settings icon on the top bar. | [Documentation](./capabilities#settings-button) |
92-
| `targets.STICKY_HEADER` | Target id for the sticky header. | [Documentation](./capabilities#sticky-header) |
93-
| `targets.SUB_NAVIGATION` | Target id for the sub navigation. | [Documentation](./capabilities#sub-navigation) |
94-
| `targets.SUB_NAVIGATION_UI` | Target id for the sub navigation's UI. | [Documentation](./capabilities#sub-navigation-ui) |
95-
| `targets.WIDGET` | Target id for a widget. | [Documentation](./capabilities#widget) |
96-
| `targets.USER_DIRECTORY` | Target id for the user directory. | [Documentation](./capabilities#user-directory) |
97-
| `targets.USER_PROFILE_ORG_CHART` | Target id for the user profile orgnaization chart | [Documentation](./capabilities#organization-chart) |
65+
| Target | Description | Compatibilities |
66+
|--------------------------------------|-------------------------------------------------------------------------------------|-------------------------------------------------------------|
67+
| `targets.APP` | Target id for application | [Documentation](./capabilities#application) |
68+
| `targets.BOOKMARKS` | Target id for the bookmarks/app launcher component | [Documentation](./capabilities#bookmarks) |
69+
| `targets.COMMUNITY` | Target id for the community pages | [Documentation](./capabilities#community) |
70+
| `targets.CONTENT` | Target id for the content page | [Documentation](./capabilities#content) |
71+
| `targets.CONTEXTUAL_ACTIONS` | Target id for the contextual actions menu on the right hand side of a content page. | [Documentation](./capabilities#contextual-actions) |
72+
| `targets.CONTRIBUTION_MENU` | Target id for the contribution menu. | [Documentation](./capabilities#contribution-menu) |
73+
| `targets.CONTRIBUTION_BUTTON` | Target id for the contribution button. | [Documentation](./capabilities#contribution-button) |
74+
| `targets.ERROR_PAGE` | Target id for the error pages. | [Documentation](./capabilities#error-page) |
75+
| `targets.FAVORITES` | Target id for the favorite directories. | [Documentation](./capabilities#favorites) |
76+
| `targets.DIRECTORY` | Target id for the directory. | [Documentation](./capabilities#directory) |
77+
| `targets.HEADER` | Target id for the site's header. | [Documentation](./capabilities#header) |
78+
| `targets.LOGO` | Target id for the site's logo. | [Documentation](./capabilities#logo) |
79+
| `targets.NAVIGATION` | Target id for the main navigation. | [Documentation](./capabilities#navigation) |
80+
| `targets.NAVIGATION_UI` | Target id for the main navigation's UI. | [Documentation](./capabilities#navigation) |
81+
| `targets.NOT_FOUND_PAGE` | Target id for the not found error page (error code 404). | [Documentation](./capabilities#not-found-page) |
82+
| `targets.NOTIFICATIONS_BUTTON` | Target id for the notifications center component. | [Documentation](./capabilities#header) |
83+
| `targets.PAGE` | Target id for all pages. | [Documentation](./capabilities#page) |
84+
| `targets.PROFILE` | Target id for the profile page. | [Documentation](./capabilities#profile) |
85+
| `targets.SEARCH` | Target id for the search page. | [Documentation](./capabilities#search) |
86+
| `targets.SEARCH_BOX` | Target id for the search box. | [Documentation](./capabilities#search-box) |
87+
| `targets.SEARCH_CUSTOM_METADATA` | Target id for search custom metadata. | [Documentation](./capabilities#search-custom-metadata) |
88+
| `targets.SEARCH_RESULT_ICON` | Target id for icons of the search result page and quick search. | [Documentation](./capabilities#search-result-icon) |
89+
| `targets.SEARCH_TAB` | Target id for search tab. | [Documentation](./capabilities#search-tab) |
90+
| `targets.SETTINGS` | Target id for the settings menu. | [Documentation](./capabilities#settings) |
91+
| `targets.SETTINGS_BUTTON` | Target id for the settings icon on the top bar. | [Documentation](./capabilities#settings-button) |
92+
| `targets.STICKY_HEADER` | Target id for the sticky header. | [Documentation](./capabilities#sticky-header) |
93+
| `targets.SUB_NAVIGATION` | Target id for the sub navigation. | [Documentation](./capabilities#sub-navigation) |
94+
| `targets.SUB_NAVIGATION_UI` | Target id for the sub navigation's UI. | [Documentation](./capabilities#sub-navigation-ui) |
95+
| `targets.WIDGET` | Target id for a widget. | [Documentation](./capabilities#widget) |
96+
| `targets.USER_DIRECTORY` | Target id for the user directory. | [Documentation](./capabilities#user-directory) |
97+
| `targets.USER_PROFILE_ORG_CHART` | Target id for the user profile organization chart | [Documentation](./capabilities#organization-chart) |
98+
| `targets.USER_CARD_FIELDS` | Target id for the user card displayed on hovering users | [Documentation](./capabilities#user-card-fields) |
99+
| `targets.USER_PROFILE_HEADER_FIELDS` | Target id for the user profile header fields | [Documentation](./capabilities#user-profile-header-fields) |
98100

99101
#### widget target
100102

‎docs/javascript/assets/target-user-card-fields.png

17.6 KB
Loading

‎docs/javascript/assets/target-user-profile-header-fields.png

12.8 KB
Loading

‎docs/javascript/assets/use-case-user-profile-fields.png

18.9 KB
Loading

‎docs/javascript/capabilities.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,39 @@ Target that allows customizing the [user directory](https://docs.lumapps.com/doc
462462

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

465+
### User card fields
466+
467+
Target that allows customizing a user's card fields section, adding additional fields below the current existing ones.
468+
469+
![Target profile](./assets/target-user-card-fields.png "Target profile")
470+
471+
#### Compatibility
472+
473+
| | |
474+
|---------------|------------------------------------------------------------------------------------------------------------------|
475+
| Target ID | `user-card-fields` |
476+
| Description | Target the user card fields. |
477+
| Placements | Compatible with placements: `UNDER`. |
478+
| Disable | No compatibility |
479+
| Changing text | No compatibility |
480+
481+
### User profile header fields
482+
483+
Target that allows customizing a user's profile header fields section, adding additional fields the current existing ones.
484+
485+
![Target profile](./assets/target-user-profile-header-fields.png "Target profile")
486+
487+
#### Compatibility
488+
489+
| | |
490+
|---------------|------------------------------------------------------------------------------------------------------------------|
491+
| Target ID | `user-profile-header-fields` |
492+
| Description | Target the user profile header fields. |
493+
| Placements | Compatible with placements: `ABOVE`, `UNDER`, `RIGHT`, `LEFT` |
494+
| Disable | No compatibility |
495+
| Changing text | No compatibility |
496+
497+
465498
### Search
466499

467500
Target that allows customizing the [search page](https://docs.lumapps.com/docs/explore-l045373566110773145search/explore-l044925657249748285search).

‎docs/javascript/use-cases.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -815,6 +815,39 @@ window.lumapps.customize(({ api, components, render, constants, placement, targe
815815
});
816816
```
817817

818+
## Display a badge next to a user's profile field
819+
820+
Using the target `USER_PROFILE_HEADER_FIELDS`, we can display custom information about the user, that can be retrieved from an external service.
821+
822+
For example,
823+
824+
```js
825+
window.lumapps.customize(({ targets, components, render, placement, constants }) => {
826+
const { Text } = components;
827+
const onlineUsers = {}; // information retrieved from an external service.
828+
829+
render({
830+
placement: placement.LEFT,
831+
target: targets.USER_PROFILE_HEADER_FIELDS,
832+
toRenderWithContext: (context) => {
833+
if (onlineUsers[context.user.uid]) {
834+
return Text({
835+
color: 'green',
836+
children: 'Online',
837+
});
838+
}
839+
840+
return Text({
841+
color: 'red',
842+
children: 'Offline',
843+
});
844+
},
845+
});
846+
});
847+
```
848+
849+
![Use case user profile fields](./assets/use-case-user-profile-fields.png "Use case user profile fields")
850+
818851
## Display an icon next to each search tab
819852

820853
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.

0 commit comments

Comments
 (0)