LESS Function -evo-widgetfile-url does not work as expected in Verint 12

I'm using a similar template to generate CSS from LESS styles as in the Site Theme (variables.less => variables.vm), to define styles for the widget based on some environment conditions and configuration settings.

I found that "-evo-widgetfile-url" does not work as expected in Verint 12.0.3.17950. But this function working well in Verint 11.1.x versions.

Sample code to reproduce this issue:

Widget Content component code:

$core_v2_page.AddLink('stylesheet', $core_v2_widget.GetExecutedFileUrl('render-styles.less'), "%{ Position = 'AfterTheme' }")

<div class="unique-wrapper">
</div>

Widget "render-styles.less" code:

@import "-evo-widgetfile-url('variables.vm')";

Widget "variables.vm" code:

#if ($core_v2_user.Accessing.Username == $core_v2_user.AnonymousUserName)
    .unique-wrapper {
        height: 100px;
        background: blue;
    }
#else
    .unique-wrapper {
        height: 100px;
        background: green;
    }
#end

On the page where this widget placed I see the following output in the network tab for my widget style file:
@import "-evo-widgetfile-url('variables.vm')";

Parents
  • I think this is because the imported theme (via addlink) is now cached so any dynamic changes would potentially not work as expected 

    I'd suggest you add the dynamic styling as per the stock widgets using style.vm such as the featured content carosel which has a style.less for commonm styling and style.vm for dynamic elements 

    $core_v2_page.AddLink('stylesheet', $core_v2_widget.GetExecutedFileUrl('style.less'), "%{ Position = 'AfterTheme' }")
    $core_v2_widget.ExecuteFile('style.vm')

  • Agree with  . @import will interpret the file as a .less file but it is a .vm file that requires processing. Within a .less file, you can include other .less/.css files and read configuration options via LESS function extensions, but you cannot execute .vm files.

  • Yeah, I know about these techniques to use dynamic velocity styling or importing variables to styles.less with -evo-widgetconfig-x functions.

    But, I’m trying to resolve more complex task.

    I have custom configuration template with JSON object, that already contains LESS styles to render (configurable by admins) and additional values to configure LESS variables on the configuration panel side.

    So I’m not able to use less functions like -evo-widgetconfig-x in style.less attachments.

    For versions 11.1.x I found solution to execute custom dynamic vm/jsm files that generates LESS output to render into CSS with AddLink (for performance/caching reasons).

    For this case I used the function -evo-widgetfile-url to execute vm/jsm files. In v12 this solution doesn’t work for widgets.

    But after some attempts, I found that the “-evo-themefile-url” function does the same for v12 widgets and works like “-evo-widgetfile-url” in v11.

    Short summary:

    v11: “-evo-widgetfile-url” dynamically generates CSS styles in widgets

    v12: “-evo-themefile-url” dynamically generates CSS styles in widgets

    This finding is confusing.

    I guess, I can proceed with “-evo-themefile-url” for v12 widget, but is there any potential issue in the future?

Reply
  • Yeah, I know about these techniques to use dynamic velocity styling or importing variables to styles.less with -evo-widgetconfig-x functions.

    But, I’m trying to resolve more complex task.

    I have custom configuration template with JSON object, that already contains LESS styles to render (configurable by admins) and additional values to configure LESS variables on the configuration panel side.

    So I’m not able to use less functions like -evo-widgetconfig-x in style.less attachments.

    For versions 11.1.x I found solution to execute custom dynamic vm/jsm files that generates LESS output to render into CSS with AddLink (for performance/caching reasons).

    For this case I used the function -evo-widgetfile-url to execute vm/jsm files. In v12 this solution doesn’t work for widgets.

    But after some attempts, I found that the “-evo-themefile-url” function does the same for v12 widgets and works like “-evo-widgetfile-url” in v11.

    Short summary:

    v11: “-evo-widgetfile-url” dynamically generates CSS styles in widgets

    v12: “-evo-themefile-url” dynamically generates CSS styles in widgets

    This finding is confusing.

    I guess, I can proceed with “-evo-themefile-url” for v12 widget, but is there any potential issue in the future?

Children