nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Getting Started with WebReport Widget

MV Adam

Trying to wrap my head around the Smart UI.

Perspectives, routers, Models, Contexts, etc, can be very daunting.

I'm starting on a Custom Search Interface report widget, and my mind is very much locked into the classic UI way of doing things - adding a bunch of HTML fields, constructing a search LQL URL. I'd like my interface to more closely match the rest of the Smart UI. To that end, I'm hoping someone can provide some quick code examples to:

1. Attach a CsuiTextField to an element on the page

2. Construct a query and show the results in the SearchResults view, from a button click.

Thank you.

Find more posts tagged with

Comments

Ian_Whitfield

Hi Adam,

Just wondering if there is a specific reason the Custom View Search widget won't meet the requirements here. This is available in the Perspective Manager to add to a custom perspective if required.

Regards
Ian

Ferdinand Prantl

As Ian wrote, the easiest way is to save a search query to a CS node and place the Custom Search Form widget on some perspectifve. You can choose, what search fields will be visible and changeable and what search fields will be fixed, when the user opens the search query again. The widget needs the node ID of the saved query as parameter. The user fills editable fields and hits "Search" to execute the query.

If you want to write a custom page using search results withtout the search form or search box widgets, you can have a look at sample pages in the SDK:

Search results with search box: lib/src/csui/widgets/search.results/test/index.html

Search box alone: lib/src/csui/widgets/search.box/test/index.html

Search form alone: lib/src/csui/widgets/search.custom/test/index.html

How to show search results for a hard-coded query:

csui.onReady2([  'csui/lib/jquery', 'csui/lib/marionette',  'csui/utils/contexts/portal/portal.context',  'csui/utils/contexts/factories/search.query.factory',  'csui/widgets/search.results/search.results.view'], function ($, Marionette, PortalContext,    SearchQueryModelFactory, SearchResultsView) {  var context = new PortalContext(),      query = context.getModel(SearchQueryModelFactory),      resultsRegion = new Marionette.Region({el: '#results'}),      resultsView = new SearchResultsView({context: context});  resultsRegion.show(resultsView);  query.set({where: 'test'});  context.fetch();});<div class="binf-widgets">  <div class="binf-container-fluid">    <div class="binf-row">      <div class="binf-col-xs-12" id="results"></div>    </div>  </div></div>