Create Custom Search Forms

To create a custom search data form based on input fields, search button and list results, follow these steps:

1. On the UI template (UI tab)of the journey / journey step, add a data form container and a button element to the HTML source code:
Copy

<div id="searchAccount" style="display: inline-block; width: 80%;"></div>
<div id="BtnId" style="cursor: pointer; color: white; border: 2px solid rgba(0, 0, 0, 0);
background: #25a4dc; text-align: center; vertical-align: middle; padding: 3px; width: 125px;
height: 100%; display: inline-block; margin-bottom: 30px; margin-left: 15px;">Search</div>    

2. On the form driven flow, click the Advanced tab, then click the After Events section and provide the code to generate the search.  
   Copy

   /Generate search data form based on a custom data form (AccountSearch) with only one input field 
   (Name):
   $("#searchAccount").html("<div id="searchAccountForm" display: inline-block;"></div>");
   var formData = {
           entityName: "account",
           formName: "AccountSearch",
          mode: "insert",
           name: "searchAccountForm",
           mainHtmlId: "searchAccountForm",
           disableControlNavigation: true,
           noRenderIntent: true
       }
   ebs.generateForm(formData, function(e) {
   });
   //Generate grid
   var fetchResults = new Object();
   fetchResults.entity = new Object();
   fetchResults.entity.name = "TestEntity";
   fetchResults.entity.alias = "base";
   var viewResults = new Object();
   viewResults.fetch = fetchResults;
   viewResults.viewName = "default";
   var afterGenerateCallback = function (e) {
       var gridId = "AccountResult";
       var dataGrid = $("#" + gridId).dxDataGrid("instance");
       dataGrid.option("paging",{pageSize: 10});
       dataGrid.option("onSelectionChanged", function (g) {
           if (g.selectedRowsData != null && g.selectedRowsData.length > 0) {
               $.each(g.selectedRowsData, function(index,value) {
                   currentAccountName = value.base_Name;
                   $("#ClientsSelected").text(currentAccountName);
               });
           }  
       });
   };
   ebs.generateGrid("AccountResult", viewResults, "auto", {}, afterGenerateCallback, { 
   selectionMode: "single" });
   //search function and grid refresh as search result
   var onClickSearch = function() {
       var where = {
         type: "and",
         conditionlist: []
       };
       var productName = ebs.getFormAttributeValue("searchAccountForm","Name");
       if (productName !== null && productName !== "") {
           where.conditionlist.push({
               first: "base.Name",
               type: "contains",
               second: "val(%" + productName + "%)"
           });
       }  
       if (where.conditionlist.length == 0) where = null;
       var fetch = $("body").data("AccountResultmyData_dxquery").fetch;
       fetch.where = 
   where;                                                                                       
   //new updated fetch
       $("#AccountResult").dxDataGrid("instance").option("dataSource", ebs.getDataStore(ebs.
   getEbsDataUrl(), fetch));
       $("#AccountResult").dxDataGrid("instance").refresh();
   }
   $("#BtnId").click(onClickSearch);