Appframe Knowledge Base


1 hits
1

Declarative Bound Filter Panel

<!--Declartive Filter Panel is an extension to declartive databinding. Look at related kb articles for declartive binding-->
<!--Currently you need to specify an empty edit-template (compability issue)-->


<!-- Each filter section requires [data-filter-type] (multiple, single or search) and [url-pos].  -->
<!-- Depending on data-filter-type optional attributes are: 
       action (search), 
       data-filter-default (multiple), 
       data-filter (multiple and single), 
       data-filter-field(multiple and single)  
-->

<!-- If you have data-filter-type="search" you specify the data-filter-for to specify related textbox and action (remove or search)  and specify action (remove. search) -->
<!--If you have data-filter-type="single" or "multiple" and data is dynamically rendered you need to specify [data-filter-field] attribute to the field that will be used when filtering. -->
<!--If you have data-filter-type="single" or "multiple" and you are going to use static data,  [data-filter] attribute is required on the subelements. This will be used to filter related dataobjects. -->


<!--Specify all dataobjects that will be included in filterpanel using the [data-filter-target] attribute -->
<div data-filter-target="dsIssues,dsInvolved,dsIssueType,dsAreas,dsSeverity,dsCategory,dsActionsAssigned,dsToBeClosed, dsToBeVerified,dsToBeReviewed,dsStarred,dsAwaitingResponse">

<!--Example of [data-filter-type="search"] -->
	<h4>Free text</h4>
	<div class="input-group">
		<input type="text" name="search" id="search" class="form-control" placeholder="Search for..." data-filter-type="search" url-pos="0">
		<span class="input-group-btn">
			<button class="btn btn-default" name="removeBtn" type="button" data-filter-for="search" action="remove"><span class="glyphicon glyphicon glyphicon-remove"></span></button>
			<button class="btn btn-default" name="searchBtn" type="button" data-filter-for="search" action="search"><span class="glyphicon glyphicon-search"></span></button>
		</span>
	</div>

<!--Example of [data-filter-type="mulitple"] and static list-->
	<div data-filter-type="multiple" url-pos="1" data-filter-default="Closed IS NULL">
        <div class="checkbox">
            <label><input type="checkbox" data-filter="1=1">
                <span>Include Closed</span>
            </label>
        </div>
		<div data-item-template="edit"></div>
    </div>


<!--Example of [data-filter-type="single"] and static list-->
	<h4>Filters</h4>
	<div class="list-group" data-filter-type="single" url-pos="2">
		<a class="list-group-item data-filter-default" data-filter="" >All Issues</a>
		<a class="list-group-item" data-filter="Status = 'Awaiting Response'">Awaiting response</a>
		<a class="list-group-item" data-filter="(Status IN('Completed','Cancelled','Duplicate') AND Closed IS NULL)">To be closed</a>
		<a class="list-group-item" data-filter="(Status = 'Action Assigned' AND Closed IS NULL)">Actions assigned</a>
		<a class="list-group-item" data-filter="(Status = 'To Be Reviewed')">To be reviewed</a>
		<a class="list-group-item" data-filter="AreaResp = SUSER_SNAME()">Area resp is me</a>

		<a class="list-group-item" style="display:none;" data-filter="(AwaitingResponseFromMe > 0)">Awaiting response from me (<span data-object-id="dsAwaitingResponse" data-field="IssueID"></span>)</a>
		<a class="list-group-item" style="display:none;" data-filter="(ToBeClosedBy=SUSER_SNAME() AND Status IN('Completed','Cancelled','Duplicate') AND Closed IS NULL)">To be closed by me (<span data-object-id="dsToBeClosed" data-field="IssueID"></span>)</a>
		<a class="list-group-item" style="display:none;" data-filter="(OpenActionsAssignedToMe > 0)">Actions assigned to me (<span data-object-id="dsActionsAssigned" data-field="IssueID"></span>)</a>
		<a class="list-group-item" style="display:none;" data-filter="(AreaRespIsMe = 1 AND Status = 'To Be Reviewed')" >To be reviewed by me (<span data-object-id="dsToBeReviewed" data-field="IssueID"></span>)</a>
		<a class="list-group-item" style="display:none;" data-filter="(ToBeVerifiedBy = SUSER_SNAME() AND Verified IS NULL And Closed IS NOT NULL)" >To be verified by me (<span data-object-id="dsToBeVerified" data-field="IssueID"></span>)</a>
		<a class="list-group-item" style="display:none;" data-filter="Involved = 1">My Involvement (<span data-object-id="dsInvolved" data-field="IssueID"></span>)</a>
		<a class="list-group-item" style="display:none;" data-filter="Starred = 1">Starred (<span data-object-id="dsStarred" data-field="IssueID"></span>)</a>
	</div>


<!--Example of [data-filter-type="multiple"] and dynamic list-->
	<h4>Issue Type</h4>
    <div data-filter-type="multiple" url-pos="3" data-object-id="dsIssueType" data-list="manual-edit" data-filter-field="IssueType">
        <div class="checkbox" data-item-template="read-only">
            <label><input type="checkbox">
                <span data-field="IssueType"></span>
            </label>
        </div>
		<div data-item-template="edit"></div>

    </div>


<!--Example of [data-filter-type="multiple"] and dynamically rendered list -->
	<h4>Area</h4>
    <div data-filter-type="multiple" url-pos="4" data-object-id="dsAreas" data-list="manual-edit" data-filter-field="Area">
        <div class="checkbox" data-item-template="read-only">
            <label ><input type="checkbox" >
                <span data-field="Area"></span>, <span data-field="AreaRespFirsName"></span> (<span data-field="IssueID"></span>)
            </label>
        </div>
		<div data-item-template="edit"></div>
    </div>


<!--Example of [data-filter-type="single"] and dynamically rendered list-->
	<h4>Category</h4>
	<div data-object-id="dsCategory" url-pos="5" data-filter-field="Category" data-filter-type="single">
		@Render("Repeater", ID:"repCategories")
	</div>



<!--Example of [data-filter-type="multiple"] and dynamically rendered list-->
	<h4>Severity</h4>
    <div data-filter-type="multiple" url-pos="6" data-object-id="dsSeverity" data-list="manual-edit" data-filter-field="SeverityLevel">
        <div class="checkbox" data-item-template="read-only">
            <label ><input type="checkbox" >
                <span data-field="SeverityLevel"></span> (<span data-field="IssueID"></span>)
            </label>
        </div>
		<div data-item-template="edit"></div>
    </div>

</div>

<script>
      $(function(){
                 new af.url.DataFilter();
       });
</script>

web web-templating · Perma link post comment Posted by: Peter Øren (28-jul-2014)