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

I am on Orlando Patch 1.

MID buildstamp: orlando-12-11-2019__patch1-02-19-2020_02-26-2020_1720

The ribbon is showing in Agent workspace only. Still looking for a solution for custom workspace.

Thanks

Well if only I could have it show in Agent workspace then I was a step further.

 

how does your now-ui.json file look like?

I was able to confirm its because its not loading the script to get the component to work.  The way I confirmed this is to add it as a ribbon item and also on the side panel.  If my component is not on the side panel then it would not work and if it was then it would work.  So it looks like if its just on the ribbon they do not included the needed script.

 

I also found that if you add the component to the landing page, it will load the same component to the ribbon.  If you remove it from landing page, it will no longer load on the ribbon.

Feruza
Kilo Contributor

@Tommy Jensen Hello, I am also having this type of issue how in the end you solved it?