Access server script option in CSS to set Widget Options

[MAX17]

Dear all,

I have a question regarding how to access a certain option from the server Script with CSS.

the Server Script code is the following:

(function(){
	var gr = $sp.getInstanceRecord();
	data.href = $sp.getMenuHREF(gr);
	data.target = options.target || "";
	options.mybackground = options.mybackground || "https://test.link.com/";
	$sp.log(options.mybackground);
})();

and the relevant CSS code looks like this:

/* Background Image */
.myBackground {
  /*background-image : url("https://test.link.com/;*/
  background-image : url("'{{::c.options.mybackground}}'");
}

I already tried many different writings of this part, with different kind of quotes, without quotes, with leading c. and without.

'{{::options.mybackground}}'

Unfortunately, it was not possible to see the image that would be displayed by uncommenting the line above. So if you can help me how to use the options object properly would make me really happy.

Thank you very much in advance.

Max

[Kristian Juul A · Accepted solution]

I don't think you can access the script variables from the CSS field. But you could add the dynamic parts of your CSS as an inline style in the HTML field.

Server script:

var myBackgroundUrl = options.mybackground || 'https://test.link.com/image.png';
options.mybackground = "url('" + myBackgroundUrl + "')";

 Body HTML template:

<div class="myBackground" ng-style="::{'background-image' : options.mybackground}">
   ...
</div>