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

Hi Drew,

It worked for me in Agent workspace. But the same component is not working when added as a ribbon in custom workspace.

I am exploring further, if I find any solution, will post it here.

find_real_file.png

Thanks

I did a basic component also and it did not display either.  I did notice though that it was included in the page but it was not rendered.  I suspect that the script for the component is not being included.

Also mine did not work on the the Agent workspace either.

 

I only tried the ribbon on the oob workspace. I have not tried on a custom workspace.

Hi Drew,

Please find below the screenshots from ribbon component and ribbon setting tables.

 

find_real_file.png

 

find_real_file.png

To confirm this is working, I deactivated the Ribbon setting and no ribbon was showing. But, when I activated it again, my custom component was showing in the ribbon on change request table.

Thanks

 

Which version of Orlando?

Mine is and I cannot get it to work:

MID buildstamp: orlando-12-11-2019__patch3-04-22-2020_05-05-2020_1854


have just upgraded to patch 3 this morning on my pdi.