Using a .CSS file with a UXPScript-based dialog

InDesign
, ,
1

I have a legacy ExtendScript based solution that I am intending to build a UXP Script based dialog for so that I don’t have to build the dialog both in ExtendScript’s ScriptUI and then again in UXP when the solution moves to 100% UXP Plug-in.
So, as a proof of concept we created this:

		var uxpScript_a = [];
		uxpScript_a.push('const script = require("uxp").script;');
		uxpScript_a.push('var dialog_o = document.createElement("dialog");');
		uxpScript_a.push('dialog_o.classList.add("dialog-s-column");');
		uxpScript_a.push('document.appendChild(dialog_o);');
		uxpScript_a.push('var textField_o = document.createElement("sp-textfield");');
		uxpScript_a.push('textField_o.value = script.args[0];');
		uxpScript_a.push('dialog_o.appendChild(textField_o);');
		uxpScript_a.push('var button_o = document.createElement("sp-button");');
		uxpScript_a.push('button_o.textContent = "OK";');
		uxpScript_a.push('dialog_o.appendChild(button_o);');
		uxpScript_a.push('button_o.onclick = function () {');
		uxpScript_a.push('	script.setResult(textField_o.value);');
		uxpScript_a.push('	dialog_o.close();');
		uxpScript_a.push('}');
		uxpScript_a.push('return dialog_o.showModal();');

		var dialogResult_s = app.doScript(uxpScript_a.join('\n'), ScriptLanguage.UXPSCRIPT, [ 'sample' ]);

where the final line there is being called by ExtendScript.
It works, I get a dialog and I get the value of the text field returned:

UXPScript-based dialog
UXPScript-based dialog376×172 14.7 KB

Our UXP based plug-in solution, still under development, has a .css file where we have classes defined. For example the dialog-s-column referenced in the 4th line of the sample above.

I realize that supposedly a UXPScript can only use a single file for the script, but can that script somehow utilize an external .css file?

jsw

2

In other words, you want to dynamically generate a UXP script from ExtendScript and bundle the contents of an already existing CSS file with it?

You might be able to do that by passing the html/css content as text to innerHTML. I’ve not done this, so I can’t be sure.

The sample code to generate a dialog in Plugin for Adobe XD may help.

3

Thanks @sttk3! Much appreciated.
From further looking at things on my end I assumed we were either going to turn out just like you showed or I was going to basically replicate the CSS style attributes on the elements as they were constructed. It might turn out to be a combination if the CSS class gets reused.

jsw

1 Like
4

Would something like

const styleTag = document.createElement('style');
styleTag.innerHTML = <your .css content>
document.body.appendChild(styleTag);

work for you?