Custom component in Ribbon

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-08-2020 12:14 AM
Have anybody been able to use a custom component as a Ribbon component?
I deployed my simple component. It only displays a text.
Then I added ACL's on the table: sys_aw_ribbon_component
and created a record there that points to my component.
Then in "Ribbon settings" I configured it to display on my record in workspace.
When a record with this Ribbon is displayed. I can see that space has been assigned to the component and inspecting the page I can actually see the component directive but the content is not rendered. And there is no errors at all in the console.log.
So what could I be missing?
running locally this is what it displays:
This is the component, super simple:
import { createCustomElement, actionTypes } from '@servicenow/ui-core';
import snabbdom, { Fragment } from '@servicenow/ui-renderer-snabbdom';
import styles from './styles.scss';
import '@servicenow/now-heading';
const view = (state, { dispatch, updateState }) => {
return (
<Fragment>
<main className="now-checklist">
<div>
<now-heading label="Test ribbon" />
</div>
</main>
</Fragment>
);
};
createCustomElement('x-80603-my-ribbon', {
renderer: { type: snabbdom },
view,
styles: styles
});
- Labels:
-
Now Experience UI Framework
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-11-2020 01:52 AM
I am on Orlando Patch 1.
MID buildstamp: orlando-12-11-2019__patch1-02-19-2020_02-26-2020_1720
The ribbon is showing in Agent workspace only. Still looking for a solution for custom workspace.
Thanks

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-11-2020 03:09 AM
Well if only I could have it show in Agent workspace then I was a step further.
how does your now-ui.json file look like?

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-11-2020 08:46 AM
I was able to confirm its because its not loading the script to get the component to work. The way I confirmed this is to add it as a ribbon item and also on the side panel. If my component is not on the side panel then it would not work and if it was then it would work. So it looks like if its just on the ribbon they do not included the needed script.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-13-2020 04:54 PM
I also found that if you add the component to the landing page, it will load the same component to the ribbon. If you remove it from landing page, it will no longer load on the ribbon.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-21-2020 01:39 AM