How do you prioritise the order of a widget when it's being shown 'only in single column mode' ?

I'm editing the layout of a page in v11 of verint.

I have a bunch of widgets on a group page.

I want to specify the order of the widgets, but due to the nature of one of the widgets not being suitable for mobile responsive view, aka single column mode, I need to have two widgets showing the same thing, but one setup for mobile view, and one not (let's go with this rather than designing one widget to be suitable for both views for now)

On the widget, I can only choose one of these options:

Either it's only shown in single column mode, hidden in single column mode, or it's 'always shown, priority x in single column mode'

The problem is, I want:

'Only shown in single column mode, priority 1 in single column mode'

Because otherwise, when it's 'only shown in single column mode' everything else set with a priority takes... well, priority, but the equivalent widget for this 'single column mode' widget, in non single column mode, is at the top of the page, but this, still gets dumped to the bottom.

What're my options?

Parents
  • Could you customize the Theme and a new set of wrapping formats and then use the classes to hide and show widgets depending on media queries?

  • I'm not sure I follow, but this would be better handled via widget control due to the different knowledge/experience levels of those who have the permission(s) to change the layouts.

  • This would be done via widget control, the theme defines the options in the widget dropdowns.

  • Hi Christopher 

    So in the theme editor there is a section called "Body Script", you would need to do this for all themes (site, group and apps)

    In this file you will see the ootb wrapping options (the other selector in the widget header)

    #set ($minWidthUnit = $core_v2_theme.GetUnitValue('minWidth', '670px', 10))
    #set ($minWidth = $core_v2_utility.ParseInt($core_v2_utility.Replace($minWidthUnit, 'px', '')))
    
    
    #set ($wrappingFormats = [])
    #set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithNoSpacing'),CssClass='no-wrapper',IncludeHeader='false'}"))
    #set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithSpacing'),CssClass='no-wrapper with-spacing',IncludeHeader='false'}"))
    #set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithSpacingAndHeader'),CssClass='no-wrapping with-spacing with-header',IncludeHeader='true'}"))
    #set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-TopBorder'),CssClass='top-border with-spacing',IncludeHeader='false'}"))
    #set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-TopBorderAndHeader'),CssClass='top-border with-spacing with-header',IncludeHeader='true'}"))
    
    #set ($options = "%{ WrappingFormats = $wrappingFormats, DefaultWrappingFormatWithHeader = 'top-border with-spacing with-header reponsive-1', DefaultWrappingFormatWithoutHeader = 'no-wrapper responsive-1', LayoutReflowMinWidth = $minWidth }")
    
    $context_v2_themeBody.RenderHeader($options)
    $context_v2_themeBody.RenderPage($options)
    $context_v2_themeBody.RenderFooter($options)

    You can create duplicates of the ones you use and add the extra tags such a responsive into the class

    So for example 2 entries for no border with spacing but also with responsive elements 

    #set ($priority1 = " (priority 1)")
    #set ($priority2 = " (priority 2)")

    #set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithSpacing')$priority1,CssClass='no-wrapper with-spacing responsive-1',IncludeHeader='false'}"))


    #set ($ignore = $wrappingFormats.Add("%{Name=$core_v2_language.GetResource('WrappingFormat-NoBorderWithSpacing')$priority2,CssClass='no-wrapper with-spacing responsive-2',IncludeHeader='false'}"))

    Once added 

    When you use the page editor you will now see 2 new options 




    In essence all these options do is add classes to the widget when rendered on the page so you could also add other custom classes if required

    Obviously it would be better if you could just extend the responsive options as you can the wrapping ones but this is a clean work around

  • Thanks, I'll have to see if the dev's consider it a clean workaround and if it's persistable between site upgrades.

Reply Children
No Data