Displaying widgets/elements after search

Liberty Create - Build Advice
#1

Hi

Hopefully, this is a quick and easy question, but I can’t for the life of me work it out.

We have a search people page consisting of …

Widget 1 (left): Search criteria text boxes, date of birth calendar picker and a search button.
Widget 2 (Right, Top): Grid, containing a Heading and “Add Person” button
Widget 3 (Right, Bottom): List to display search results.

All the widgets are in a single Widget Group.

Our UX designer wants the page to be as clean as possible, so when loaded, only Widget 1 is displayed. Once a search has been attempted, Widgets 2 and 3 should then be visible.

For Widget 3, I can achieve this, as I just checked “Requires Search” in the list widget settings.

How do I do this for Widget 2? The visibility requirements all relate to data, but I don’t care what the data is in the list, I just want to say “If Widget 3 is visible, show Widget 2 as well”

Thanks in advance, Stephen.

#2

Hi @camsd047 ,

Unfortunately there is no way out-the-box to achieve this for the Grid widget.

However, alternatively you could achieve this within Code Studio. To do this, you would need to do the following:

  1. Set a custom class in your widget, call it whatever you like.
    This can be done via; Page Builder settings > Advanced > Custom CSS Class

  2. Create a Code Studio component (Wrapper/Presenter) to apply to your search fragments.
    This could be applied to any one of your fragments, or a hidden fragment, or the search button itself.

  3. Within your Code Studio component, you would write your code so that you can set the ‘Display’ CSS attribute on your custom class to ‘Unset’ or ‘None’ appropriately, based on whether a search has been commenced or not.

Hope this helps :slight_smile:

#3

Hi Ali

Thanks for the info, it does indeed help.

Whilst I’ve used the code studio briefly in the past for manipulating record data, I haven’t done anything with Wrappers/Presenters. Is there any documentation/training/presentations etc which would assist us in creating these?

Thanks

Stephen

#4

Hi @camsd047 ,

There’ll be some documentation in our Community Docs portal, and Code Studio also has in-built documentation too. You’ll only really need to use frontend.js to set the class property to ‘None’ or ‘Unset’, but you’ll also need to use main.js to find out whether a search has been commenced or not.
However, maybe my colleague will have some time to assist you here.

@adam.mills do you mind helping Stephen build a Code Studio component to achieve the above?