Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

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.