Custom Filters

<div class="input-append date" data-emui-type="datepicker">
    <input data-format="dd-MM-yyyy" class="form-control" placeholder="Created" data-xvalue="created" type="text" data-operator="AND"></input>
    <span class="add-on"><i data-date-icon="icon-calendar"></i></span>
</div>

<div class="input-append date" data-emui-type="datepicker" data-xvalue="created" data-operator="AND">
    <input class="form-control" placeholder="Created" type="text"></input>
    <span class="add-on"><i data-date-icon="icon-calendar"></i></span>
</div>

<div class="emui-row">
    <div class="emui-title">Channel</div>
    <div class="emui-content">
        <input type="text" class="form-control" data-xvalue="channel" placeholder="Channel" data-operator="AND"/>
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Channel</div>
    <div class="emui-content">
        <select data-xvalue="channel" class="form-control" data-operator="OR">
            <option value="">All channels</options>
            <option value="Globe-Print">Globe-Print</options>
            <option value="Globe-Web">Globe-Web</options>
        </select>
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Channel</div>
    <div class="emui-content">
        <select data-xvalue="userchannel" class="form-control" data-preload="true" data-operator="OR">
        </select>
    </div>
</div>

<!-- MODIFIED -->
<div class="emui-row">
    <div class="emui-title">Modified</div>
    <div>
        <div class="emui-content" style="width: 40%;float: left;">
            <div class="emui-title">From:</div>
            <div class="input-append date" data-emui-type="datepicker" data-xvalue="modified-date-from">
                <input id="modified-date-from" class="form-control" placeholder="From" type="text" data-identifier="fromField1"></input>
                <span class="add-on"><i data-date-icon="icon-calendar"></i></span>
            </div>
        </div>
        <div class="emui-content" style="width: 40%;float: left; margin-left:30px">
            <div class="emui-title">To:</div>
            <div class="input-append date" data-emui-type="datepicker" data-xvalue="modified-date-to">
                <input id="modified-date-to" class="form-control" placeholder="To" type="text" data-identifier="toField1"></input>
                <span class="add-on"><i data-date-icon="icon-calendar"></i></span>
            </div>
        </div>
        <div class="emui-content" style="display: none; visibility: hidden;">
                <div class="input-append date" data-emui-type="datepicker" data-xvalue="modified">
                <input id="date-to" class="form-control" type="text" data-identifier="modifiedField1"></input>
            </div>
        </div>
    </div>
</div>

// NOTE: We are including ONLY the "getSearchValue" method of the Javascript file. The rest looks the same as documented below.

getSearchValue: function(ctx, params) {
    /*
     *  ctx object, in this case, contains only info about the current view and tab.
     *  Use this method ONLY if you need to perform further elaborations ( e.g. in case
     *  you don't want to pass some values, or in case this element is hidden but
     *  you still want to pass it, or in case of multiple connected inputs to produce
     *  a single value ).
     */

    /* EXAMPLE WITH DATA-XVALUE IN THE DATEPICKER DIV. A DATE OBJECT IS RETURNED. */

    // Does nothing.
    if (params.dataId === 'modified-date-from') {
        // First, save the date-from value for later
        this.dateFrom = null;
        if(params.getSearchValue() !== null){
             this.dateFrom = params.getSearchValue()[0];
        }
        // We return null because we don't want it to be processed by the filter engine.
        return null;
    }
    else if (params.dataId === 'modified-date-to') {
        // Then, save the date-to value for later
        this.dateTo = null;
        if(params.getSearchValue() !== null){
            this.dateTo = params.getSearchValue()[0];
        }
        // We return null because we don't want it to be processed by the filter engine.
        return null;
    } else if (params.dataId === 'modified') {
        // At last, I have the hidden "modified" field, which I can build as desired.

        if (this.dateFrom === null && this.dateTo === null) {
            // User did not specify anything. We don't specify the "modified" field
            return null;
        } else if (this.dateFrom !== null && this.dateTo !== null) {
            // User specified both the "from" date and the "to" one.
            // We build the modified value as "DATEFROM;DATETO";

            /* NOTE: IN CASE OF RANGE / METADATARANGE FILTER, the format MUST BE YYYYMMDDHHmmss instead of YYYYMMDD */
            return moment(this.dateFrom).format('YYYYMMDD') + ';' + moment(this.dateTo).format('YYYYMMDD');
        } else if (this.dateFrom === null) {
            // User specified ONLY the "to" date.
            // We can decide that, in this case, the from date is a year before.
            var today = new Date();
            var yyyy = today.getFullYear() - 1;
            this.dateFrom = moment(today).year(yyyy).toDate();

            /* NOTE: IN CASE OF RANGE / METADATARANGE FILTER, the format MUST BE YYYYMMDDHHmmss instead of YYYYMMDD */
            return moment(this.dateFrom).format('YYYYMMDD') + ';' + moment(this.dateTo).format('YYYYMMDD');
        } else {
            // User specified ONLY the "from" date.
            // We can decide that, in this case, the to date is today.
            var today = new Date();
            this.dateTo = moment(today).toDate();

            /* NOTE: IN CASE OF RANGE / METADATARANGE FILTER, the format MUST BE YYYYMMDDHHmmss instead of YYYYMMDD */
            return moment(this.dateFrom).format('YYYYMMDD') + ';' + moment(this.dateTo).format('YYYYMMDD');
        }
    }
    else {
        // In any other case, for any other field, we return the value inserted by the user.
        return params.getSearchValue();
    }


    /* ALTERNATIVE EXAMPLE WITH DATA-XVALUE IN THE INPUT DATEPICKER. A STRING IS RETURNED. */

    if (params.dataId === 'modified-date-from') {
        // First, save the date-from value for later
        this.dateFrom = params.getSearchValue();
        // We return null because we don't want it to be processed by the filter engine.
        return null;
    }
    else if (params.dataId === 'modified-date-to') {
        // Then, save the date-to value for later
        this.dateTo = params.getSearchValue();
        // We return null because we don't want it to be processed by the filter engine.
        return null;
    }
    else if (params.dataId === 'modified') {
        // At last, I have the hidden "modified" field, which I can build as desired.

        if (this.dateFrom === null && this.dateTo === null) {
            // User did not specify anything. We don't specify the "modified" field
            return null;
        } else if (this.dateFrom !== null && this.dateTo !== null) {
            // User specified both the "from" date and the "to" one.
            // We build the modified value as "DATEFROM;DATETO";
            return this.dateFrom + ';' + this.dateTo;
        } else if (this.dateFrom === null) {
            // User specified ONLY the "to" date.
            // We can decide that, in this case, the from date is a year before.

            var today = new Date();
            var yyyy = today.getFullYear() - 1;
            var newDateFrom = yyyy + '' + '0101';

            // We build the new interval.
            return newDateFrom + ';' + this.dateTo;
        } else {
            // User specified ONLY the "from" date.
            // We can decide that, in this case, the from date is 15 days after today.

            var today = new Date();
            today.setDate(today.getDate() + 15);

            var dd = today.getDate();
            var mm = today.getMonth() + 1;

            if (dd < 10) dd = '0'+ dd;
            if (mm < 10) mm = '0'+ mm;

            var newDateTo = today.getFullYear() + '' + mm + dd;

            return dateFrom + ';' + newDateTo;
        }
    } else {
        // In any other case, for any other field, we return the value inserted by the user.
        return params.getSearchValue();
    }
}

<div class="emui-row">
    <div class="emui-title">Restrict to path (and subfolders)</div>
    <div class="emui-content">
        <input type="text" class="form-control" data-xvalue="restrictto" placeholder="Path" />
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Restrict to path (and subfolders)</div>
    <div class="emui-content">
        <select data-xvalue="restrictto" class="form-control">
            <option value="">All paths</options>
            <option value="/Globe/Stories/Politics">/Globe/Stories/Politics</options>
            <option value="/Globe/Stories/Sport">/Globe/Stories/Sport</options>
        </select>
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Sort</div>
    <div class="emui-content">
        <input type="text" class="form-control" data-xvalue="sort" placeholder="Sort" />
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Sort</div>
    <div class="emui-content">
        <select data-xvalue="sort" class="form-control">
            <option value="">Default sort</options>
            <option value="ObjectInfo/modified;ND">Modified, DESC</options>
            <option value="ObjectInfo/modified;NA">Modified, ASC</options>
            <option value="ObjectInfo/created;ND">Created, DESC</options>
            <option value="ObjectInfo/created;NA">Created, ASC</options>
        </select>
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Workflow</div>
    <div class="emui-content">
        <select class="form-control" data-xvalue="workflow">
            <option value="">Any workflow</option>
            <option value="NewsFlow/Editing">NewsFlow/Editing</option>
            <option value="NewsFlow/For Approval"></option>
        </select>
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Type</div>
    <div class="emui-content">
        <select class="form-control" data-xvalue="type">
            <option value="">Any type</option>
            <option value="EOM::Story">EOM::Story</option>
            <option value="EOM::MediaGallery">EOM::MediaGallery</option>
        </select>
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Type</div>
    <div class="emui-content">
        <select class="form-control" data-xvalue="type" data-operator="OR" data-preload="true" multiple data-block-operator="AND"></select>
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Owner</div>
    <div class="emui-content">
        <select class="form-control" data-xvalue="owner">
            <option value="">Any user</option>
            <option value="johndoe">johndoe</option>
            <option value="Kurt">Kurt Cobain</option>
        </select>
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Search in workfolder</div>
    <div class="emui-content">
        <input type="text" class="form-control" data-xvalue="workfolder" placeholder="Path" />
    </div>
</div>

<div class="emui-row">
    <div class="emui-title">Search in workfolder</div>
    <div class="emui-content">
        <select data-xvalue="workfolder" class="form-control">
            <option value="">All paths</options>
            <option value="/Globe/Stories/Politics">/Globe/Stories/Politics</options>
            <option value="/Globe/Stories/Sport">/Globe/Stories/Sport</options>
        </select>
    </div>
</div>