Classical Search for Fluid Components

One of the major changes between Classic and Fluid UI is the ‘Search’ options available for accessing a component (transaction). The classical way of search pages which get built automatically based on a search record associated with a component is not readily available in Fluid UI. This is an area of frequent debate and concern that I have encountered from customers during my Fluid training course.

Following are the standard search options available for Fluid UI,

  1. Bypass search by passing the keys
  2. Real-time search using component based pivot grids
  3. Keyword based search using Search framework
  4. Custom fluid search pages

These options suit well for certain specific needs such as self-service components or analytic front end to administrative components. However, options 2 -4 tend to be an overkill to build and maintain in order to provide a basic search to fluid components. For instance, a fluid run control component where a user can search for an existing run control or create a new run control to execute a batch process.

In this article I have discussed an approach to build a generic search functionality that can be invoked from various fluid components to provide a classical way of search and access to the components.

For the purpose of this illustration, I have built a custom fluid component which provides a read-only view of basic user profile information. User will have to search and select a User Id to view the profile data (similar to the delivered classic user profile). Screenshot of the target fluid page,


I have used a delivered view – PSOPRDEFN_VW as a search record for this component. As mentioned earlier Fluid Components do not by default build its search pages, when a fluid component is accessed without one of the 4 options discussed earlier, search page will be in error.


Generic Fluid Search Functionality

The approach to have custom search for fluid components involves following steps,

  1. User access a fluid component
  2. During the ‘SearchInit’ event, user is redirected to a custom search component
  3. User searches and selects the keys
  4. User re-directed to the fluid component with selected key to access the transaction


SearchInit Event in the Target Fluid Component

Use ‘SearchInit’ event to perform following activities,

  1. Check if the search keys are available, if yes access the transaction directly
  2. If search keys are not available, redirect user to the search page
    1. Specify where the user needs to be returned after searching
    2. Optionally specify record and fields to be used in the search

Note: Since this activity involves user moving between 2 components, information sharing between them has to happen outside the component context, below example uses global variables to achieve it.

I have used arrays to transfer data between the components, however a variety of options like record, rowset, application class properties etc. can be used as well.

Global array of string &Fl_Srch_Req1, &Fl_Srch_Req2, &Fl_Srch_Rsp;

If &Fl_Srch_Rsp = Null Then
   /* Info on where to return after search */
   &Fl_Srch_Req1 = CreateArray("");
   &Fl_Srch_Req1 [1] = "POIT_LB_MENU";
   &Fl_Srch_Req1 [2] = "USE";
   &Fl_Srch_Req1 [3] = "POIT_LB_USRPRF_FL";
   &Fl_Srch_Req1 [4] = "POIT_LB_USRPRF_FL";
   &Fl_Srch_Req1 [5] = "U";

   /* Info on what search record and fields to be used */
   &Fl_Srch_Req2 = CreateArray("");
   &Fl_Srch_Req2 [1] = "PSOPRDEFN_VW";
   &Fl_Srch_Req2 [2] = "OPRID";
   &Fl_Srch_Req2 [3] = "OPRDEFNDESC";
   Transfer( False, MenuName.POIT_LB_MENU, BarName.USE, ItemName.POIT_FL_SRCH_COMP, Page.POIT_FL_SRCH_COMP, "U");
   PSOPRDEFN_VW.OPRID = &Fl_Srch_Rsp [1];
   &Fl_Srch_Rsp = Null;

Generic Fluid Search Component

Create a custom fluid page and component to offer the basic search functionality. This component has to cater for the following,

  • Provide one or multiple fields for user to search
  • Provide a grid to display search result and an option for user to select a result and return to the target fluid component

In the example below, I have used a simple keyword option for user to search which will search the input value against all the search keys in the search record and return the results.


As this search page is generic and reusable across multiple fluid components, search fields and result display should be generic.

  • ‘Search’ button is coded to use of the search record field parameters passed from the target fluid component
Global array of string &Fl_Srch_Req1, &Fl_Srch_Req2, &Fl_Srch_Rsp;
Local Rowset &SearchRs, &SrchRslt;
Local Record &SearchRsltRec;
If &Fl_Srch_Req1 <> Null And
      &Fl_Srch_Req2 <> Null Then   
   &SearchRecName = &Fl_Srch_Req2 [1];   
   &SearchRs = CreateRowset(@("RECORD." | &SearchRecName));
   &WhereClause = "WHERE 1=1 ";
   &ANDClause = "";
   For &I = 2 To &Fl_Srch_Req2.Len
      &ANDClause = &ANDClause | " AND " | &Fl_Srch_Req2 [&I] | " LIKE '%" | POIT_FL_SCH_WRK.DESCR100 | "%'";
   &SearchRs.Fill(&WhereClause | &ANDClause);   
   &SrchRslt = GetLevel0()(1).GetRowset(Scroll.POIT_FL_SRCH_VW);   
   &SearchRec = "RECORD." | &SearchRecName;
   &SrchFld1 = "FIELD." | &Fl_Srch_Req2 [1];
   &SrchFld2 = "FIELD." | &Fl_Srch_Req2 [2];   
   For &j = 1 To &SearchRs.ActiveRowCount      
      If &j > 1 Then
         &SrchRslt.InsertRow(&j - 1);
      If &SearchRs(&j).PSOPRDEFN_VW.OPRID.Value <> "" Then         
         &SrchRslt(&j).POIT_FL_SRCH_VW.PTKEYVALUE1.Value = &SearchRs(&j).GetRecord(@&SearchRec).GetField(1).Value;
         &SrchRslt(&j).POIT_FL_SRCH_VW.PTKEYVALUE2.Value = &SearchRs(&j).GetRecord(@&SearchRec).GetField(2).Value;         
  • ‘Select’ button is coded to transfer the user to the target fluid component
Global array of string &Fl_Srch_Req1, &Fl_Srch_Req2, &Fl_Srch_Rsp;
Local Rowset &SearchRs, &SrchRslt;

If &Fl_Srch_Req1 <> Null And
      &Fl_Srch_Req2 <> Null Then   
   &Fl_Srch_Rsp = CreateArray("");   
   &Fl_Srch_Rsp [1] = POIT_FL_SRCH_VW.PTKEYVALUE1;
   &Fl_Srch_Rsp [2] = POIT_FL_SRCH_VW.PTKEYVALUE2;   
   Transfer( False, @("MenuName." | &Fl_Srch_Req1 [1]), @("BarName." | &Fl_Srch_Req1 [2]), @("ItemName." | &Fl_Srch_Req1 [3]), @("Page." | &Fl_Srch_Req1 [4]), &Fl_Srch_Req1 [5]);   

With the above build in place, accessing the fluid user profile component via the generic search page will work as shown in this video.


Note: To keep the posting concise, I have not elaborated on the standard objects like records, pages, components etc. used in this build. This article is intended to provide a high-level overview of the approach that can be applied as you deem fit to your requirements.

Before building such custom functionality, ensure you are fully aware of the delivered search options for Fluid UI, which can be accessed here – Working with Fluid Search Options