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

[Omkar Mone]

Hi 

Why are you using options? And if you giving background color then how have you called it in the html, just a screenshot would help. Also check the ng-class option in HTML.

Regards

Omkar Mone

[MAX17]

Hi

sorry, maybe it was too little background information 🙂

I try to build a widget (the original widget is the "Icon Link" widget) where I can change the background image by adding a link to the options for the widget instance in the service portal designer.

It is possible for me to call the link in HTML but it is not possible to provide it to the URL function in the CSS script. Maybe this is because it needs to be in quotes.

The CSS Code looks like this:

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

The HTML code looks like this:

<div class="myBackground">{{::c.options.mybackground}}
  <div class="iconlink" ng-class="{'high-contrast': accessibilityModeEnabled}">
    <!--// Top Icon -->
    <a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-href="{{::data.href}}" class="top_icon {{::options.class_name}}" target="{{::data.target}}">
      <div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}"></div>
      <h2>{{::options.title}}</h2>
      <span class="text-muted">{{::options.short_description}}</span>
    </a>

    <!--// Circle Icon -->
    <a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}" class="circle_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
      <span class="fa fa-stack fa-2x">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
      </span>
      <h2>{{::options.title}}</h2>
      <span class="text-muted">{{::options.short_description}}</span>
    </a>

    <!--// Color Box -->
    <a ng-if="::(options.link_template == 'Color Box')" ng-href="{{::data.href}}" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" target="{{::data.target}}">
      <div class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>
      <h2>{{::options.title}}</h2>
      <span>{{::options.short_description}}</span>
    </a>
  </div>
</div>

Thank you very much for your fast reply!

Best regards,

Max

[Alikutty A]

Hi,

Why dont you place the options directly on your div in the style tag? CSS may not render JS lines.

<div style="background: url("'{{::options.mybackground}}'")" class="myBackground">

Thanks!

[Omkar Mone]

Hi 

Try to access the options directly in the style tag in the HTML - 

Let me know if that works.

Regards,

Omkar Mone