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

Question

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?

Christopher G. Stanton · Accepted Answer

Matt said: Ideally, this is an option we'd love to have added to the core platform & would live in the Responsive Behaviour menu 
 Yes, the menu options here should govern "cssClassAddition" These are the parameters you have to edit/insert in manually but they should really be handled by the GUI: responsive-shown responsive-1 ("Only shown in single column mode, Priority 1 in single column mode") responsive-shown responsive-2 ("Only shown in single column mode, Priority 2 in single column mode") responsive-shown responsive-3 ("Only shown in single column mode, Priority 3 in single column mode") 
 At the moment you have to export the XML of the theme, edit them manually and then re-import the XML of the theme.

Robert Nash · Answer

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?

Karl Barber · Answer

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

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

Top Replies