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

Developing the custom component is not the issue. This thread is about using the component in a Ribbon.

In my case the component do work except when used in a ribbon.

I still have not found a solution (but have also not worked on it).