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
10-21-2020 07:35 AM
Unfortunately it is still not working. I have not tried the workaround yet. I am holding this until Quebec.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-21-2020 08:53 AM
Have you logged a case with support? I did last week for an issue I could not find and the community was not responding to and they told me that the UI support team would be handling Now Component cases.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-21-2020 09:13 AM
No I have not done that. The last time I did that I got the response that they did NOT support custom component development.
But I will hopefully try a ribbon on Quebec very soon and report if it is still a problem.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-01-2022 05:18 PM
Old thread but I'm looking to do something similar, anybody get any traction here?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
05-26-2022 09:01 AM
I've built custom UX Components and deployed the first to Quebec and updated it for San Diego. Start with the example servicenow components. There is a README file with each, read it.
Guides | ServiceNow Developers
PDI is easy to get it installed. Getting it into a real instance with SSO is not.
Make sure your VSCode environment is correct for the build. VSCode like run as admin!
These version work, others do not:
node version 12.19.0
NPM version 6.14.10
If your component doesn't work, I find it's a script error. You'll know if your browser source is missing a shadowRoot. Add console.log and move it along until you lose it.
1: install NVM (get the OS version from Git.)
1.1: Windows is here: https://github.com/coreybutler/nvm-windows/releases
1.2: you want the "nvm-setup.zip" at the bottom
2: nvm install 12.19.0 (cmd as admin)
3: nvm use 12.19.0 (cmd as admin)
4: install python 3.10
5: check path sysdm.cpl for links
6: install Visual Code
7: install Servicenow CLI (get from store)
8: run npm install @servicenow/cli -g (needed to scaffold global) (cmd as admin)
npm install @servicenow/cli@quebec
9: create component folder for your code. eg.
10: download the servicenow github component examples (they work OOB but will not deploy while in a group)
11: open Visual Code (as admin as you need to start a node server)
12: open folder you created
13: open README and follow it.