Product Selector

Fusion 5.12
    Fusion 5.12

    Advanced Search

    App Studio provides an advanced search capability where a user can specify one or more filters to a query. This provides a more granular search experience, allowing for users to craft tailored queries to quickly find exactly what they are looking for.

    How to Configure Advanced Search in App Studio Enterprise

    1. Open ../src/main/webapp/search/app/controllers/search.controller.js

    2. Add the following code block inside the SearchController function:

      $scope.advancedBox = {
    showAdvanced: false,
    toggleAdvanced: function() {
        $scope.advancedBox.showAdvanced = !$scope.advancedBox.showAdvanced;
    }
};

    3. Open ../src/main/webapp/views/partials/header.tpl.html

    4. Replace the <search:box> element with the code block below. The original <search:box> tag may span multiple lines and include nested elements such as <instant:result-list> and/or <query:suggestions>. You must replace the entire <search:box> tag with the following code block:

      Note: You must also update the <advanced:date-range> and <advanced:text> tags to point to fields in your data set. When using the <advanced:text> tag for seaching within field values you must use an untokenized field.

      <search:advanced>
    <search:box placeholder="Search..."></search:box>
    <a ng-click="advancedBox.toggleAdvanced()" class="toggle" styling="text-white">Advanced Search</a>
    <div class="tk-popover" ng-show="advancedBox.showAdvanced">
        <a ng-click="advancedBox.toggleAdvanced()" class="close">close</a>
        <layout:grid>
            <layout:block>
                <advanced:date-range fields="published_date_tdt=Published Date,last_modified_tdt=Last Modified Date" min-view="day"></advanced:date-range>
                <advanced:text fields="category_t=Category,theme_t=Theme"></advanced:text>
            </layout:block>
        </layout:grid>
    </div>
</search:advanced>

    5. Replace the <layout:include> tags in any HTML files that reference header.tpl.html file with an <ng:include> tag.

      • Replace this line: <layout:include file="views/partials/header.tpl.html"></layout:include>

      • With this line: <ng:include src="'views/partials/header.tpl.html'"></ng:include>

    6. Add the following code block to ../src/main/webapp/styles/includes/custom.less:

      Note: You may need to update the color: rgb(255,255,255) attribute in the toggle class below in order for the Advanced Search…​ text to be visible in the header.

      .tk-advanced-search {
    top: -5px;
    .tk-advanced-search .tk-advanced-search-input {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .toggle {
        color: rgb(255,255,255);
        font-size: 0.9em;
        text-decoration: underline;
        float: right;
        margin-top: 2px;
        font-style: italic;
    }
    .tk-popover {
        background: #fff;
        &:before, &:after {
            display: none;
        }
        .close {
            float: right;
            margin: -12px -8px 0 0;
        }
        select {
            margin-bottom: 0;
            margin-top: 0;
        }
    }
}
.tk-advanced-search .tk-advanced-search-input .entry,
.tk-advanced-search .tk-advanced-search-input .field-select,
.tk-advanced-search .tk-advanced-search-input .tk-widget-date-range .tk-from-date {
    margin-right: .5em;
}
.tk-widget-date-range .tk-from-date, .tk-widget-date-range .tk-to-date {
    width: 48%;
    margin:0;
}
.tk-widget-date-range .tk-to-date .tk-stl-datetimepicker {
    right:-40%;
}
.tk-widget-date-range .tk-from-date .tk-stl-datetimepicker {
    left: -40%;
}
.tk-advanced-search-input-text .entry {
    width:29.5%;
    margin-right: .8em!important;
}
.tk-advanced-search .tk-popover {
    .tk-advanced-search-input {
        clear:both;
        width: 100%;
        max-width: 100%;
        margin:10px 0 0;
        input {
            padding-left: 1em;
        }
        .entry {
            // width: 40%;
            // max-width: 220px;
            input {
                width: 100%;
                margin:0;
                margin-top: 2px;
                display: inline-block!important;
            }
        }
    }
    select {
        width: 28%;
        max-width: 150px;
        height: 38px;
    }
    .tk-widget-date-range {
        label {
            display: none;
        }
        input {
            margin-bottom: 0;
        }
    }
}

    7. Hard refresh the search UI in your browser. There will now be an Advanced Search…​ link under the search box in the header. Click this link to bring up the Advanced Search dialog box.