Custom component in Ribbon

Tommy Jensen
Giga Guru

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?

find_real_file.png

running locally this is what it displays:
find_real_file.png

 

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
});
25 REPLIES 25

Unfortunately it is still not working. I have not tried the workaround yet. I am holding this until Quebec.

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.

 

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.

ryanlitwiller
Giga Guru

Old thread but I'm looking to do something similar, anybody get any traction here?

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.