Is it possible to set a field value width on a form (using a 2 column layout)?

[RichardSaunders]

Is it possible to set a field value width on a form (using a 2 column layout)?

As you can see the image is cut off.

I have an HTML field with an image of 642px wide. I have tried a number of UI scripts with no luck. 

Its ok in a one column layout, but the requirement is to use this layout. 

Any ideas?

[Maik Skoddow]

Hi @RichardSaunders 

maybe there is a solution, but I can not recommend it as you had to use some DOM manipulation that could get broken in the next upgrade.

Workaround: Have you tried 1 Single Column Layout. I guess in that case the image should be visible completely.

Maik

[-O-]

You could create a formatter that displays the HTML field on all 3 parts of one column (uses the spaces for label, field and decorators all for displaying the field HTML content).

[Dr Atul G- LNG]

Hi @RichardSaunders 

I can under stand it can be a business requirement but if you feel okay use hyperlinks the way we use in incident and problem Priority Field.

[-O- · Accepted solution]

@Maik Skoddow 
I did not actually mean to reply to you previously, sorry for that 🙂

@RichardSaunders 

Here's what you could do:

Create a record in table content_css having

.u-element-html-root {
	background-color: black;
	color: white;
	position: relative;
	width: 100%;
}

as value in field Style.

Just for consistency I would also name it u-element-html but it does not matter at all.

Of course you can use the preferred styles in the final solution, I am using these values just for demonstration purposes.

Actually you can even forgo this and related steps below.

Create a UI Script (API name: u-element-html😞

/*
	eslint-env browser, es6
*/
class UElementHTML extends HTMLElement {
	static observedAttributes = ['value'];

	#shadowRoot
	#contentDiv
	#styleLink

	constructor () {
		super();

		this.#contentDiv = this.#createContentDiv(document.createElement('div'));
		this.#shadowRoot = this.attachShadow({ 'mode': 'closed' });
		this.#styleLink = this.#createStyleLink(document.createElement('link'));

		this.#shadowRoot.append(this.#styleLink);
		this.#shadowRoot.append(this.#contentDiv);
	}

	attributeChangedCallback (name, oldValue, newValue) {
		this.#contentDiv.innerHTML = newValue;
	}

	#createContentDiv (span) {
		span.className = "u-element-html-root"
		return span;
	}

	#createStyleLink (link) {
		link.href = '/55fc9e4d9313f110099cfcf08bba1018.cssdbx?v=2023-12-22_14-14-10';
		link.rel = 'stylesheet';
		link.type = 'text/css';

		return link;
	}
}

if (!customElements.get('u-element-html'))
	customElements.define('u-element-html', UElementHTML);

On line

		link.href = '/55fc9e4d9313f110099cfcf08bba1018.cssdbx?v=2023-12-22_14-14-10';

you will use the unique value (sys_id) of the style record created previously.

Create UI macro u_element_problem_risk_rating_image:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<g:requires name="/u-element-html.jsdbx?v=2023-12-22_14-14-10" />
	<div choice="2" data-type="label" id="label.${ref}" nowrap="true" type="pick_list">
		<label class="col-xs-12 col-sm-12 col-md-12 col-lg-12 control-label" dir="ltr" for="" style="margin-bottom: var(--now-global-space--xs,4px); text-align: start;">
			<span class="required-marker" id="status.${ref}" mandatory="false" oclass="mandatory_populated"></span>
			<span class="label-text" data-html="false">Workaround</span>
		</label>
	</div>
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 form-field input_controls">
		<u-element-html
						class="form-control"
						style="height: unset; padding: unset;"
						value="$[HTML: current.getElement('u_risk_rating_image').getHTMLValue(); ]" />
	</div>
</j:jelly>

You would - of course - use the correct column name in line

						value="$[HTML: current.getElement('u_risk_rating_image').getHTMLValue(); ]" />

I'm assuming it is u_risk_rating_image, but I could be wrong.

Finally create a formatter using this UI Macro and add it to your form.
Here's how this looks if I configure the above solution to echo field workaround:

I have chosen to use a Web Component based solution so as to isolate the form from the styles in the HTML in the field that might exist and to isolate the field from the styles in the HTML in the form that exists.