Appframe Knowledge Base


9 hits
3

Web-Templating: Lookup, lookup-bindings

<!-- To connect a lookup to an input add attribute   
	data-lookup-id="idOfYourLookup" and 
	data-lookup-bindings="field1=field2, field3=field4" 
	field1 and field3 are fields in base (host/target) data-object
	field2 and field4 are fields in lookup data-object  -->
	
<input type="tel" 
		class="form-control" 
		data-field="PostCode" 
		data-lookup-id="lookupPostCode"
		data-lookup-bindings="Postcode=Postcode, Location=Location">
		
<!--  To define a lookup add attributes as shown below. -->
<div id="lookupPostCode"
		data-templating="lookup"
		data-object-id="dsPostCodes"  
	 	data-lookup-width="400"
		data-display-fields="Postcode, Location">  <!-- creates lookup markup automatically -->
</div>
<!-- If you don't like the instant search (automatic search after 3 charachters) add attribute data-disable-instant -->

<!-- If you would like to use your own custom markup leave out the data-display-fields and provide a template instead-->
<div data-templating="lookup"
		id="lookupPostCode"
	 	class="list-group"
		data-object-id="dsPostCodes" 
	 	data-lookup-width="400"
		data-disable-instant
		data-limit-to-list="true"> <!-- Remove this attribute to get automatic search after 3 charchters -->
	<div data-item-template="default">
		<div class="list-group-item">
			<span data-field="Postcode"></span>,
			<span data-field="Location"></span> 
			<span data-field="Country"></span>
		</div>
	</div>
</div>

<!-- If you would like to have the lookup unbound you should leave out the data-lookup-bindings and data-field attributes -->
<input type="tel" 
		class="form-control" 
		data-lookup-id="lookupPostCode">
		
<div id="lookupPostCode"
		data-templating="lookup"
		data-object-id="dsPostCodes"  
	 	data-lookup-width="400"
		data-display-fields="Postcode, Location">  <!-- creates lookup markup automatically -->
</div>
<!--In order to get the selected value you need to use event in javascript-->
<script>
af.article.getUnboundCustomDropdown("lookupPostCode").attachEvent("onRecordSelected",function(pRow){
});
</script>
<!-- Custom items -->
<div id="lookupHosts"
        data-templating="lookup"
        data-display-fields="HostName, Title"
        data-lookup-items="myTestItems"  
        data-object-id="dsMyTestItems"><!--dsMyTestItems should not be defined as dataobject, must be named unique-->
</div>
<script>
/*function that returns static items as json*/
function myTestItems(){
    return [{HostName:"HostName 1", Title:"Title 1"},{HostName:"HostName 2", Title:"Title 2"}]
}
</script>

dataobject web web-templating · Perma link post comment Posted by: Sigmund Lunde (18-des-2014)

D. Young Hoang :
I am going through the Certification Program using Appframe.Core v4.30.0.19024 and data-lookup-bindings is no longer working. After looking into the js source code, looks like it has been updated to data-value-bindings. I used data-value-bindings and it worked. In addition to that the JS console will throw a warning message if the data type of the first field/column from the lookup's data object does not match with the input data type. To fix that, I need to set the data-display to the selected field. i.e.: <input data-field="CustomerID" type="number" class="form-control" id="Orders_CustomerID" data-lookup="dsCustomers" data-display="ContactID" data-value-bindings="CustomerID=ContactID"> (05-okt-2017)
3

Web-Templating: data-field, data-attr, src, href, crop , null-image, ratio, file upload

<!-- Simple bound form-->
<div data-object-id="dsPersons">
    <h4 data-field="Name"></h4>
	<input type="text" data-field="Address"></input>	
	<button data-action="save" class="btn btn-default">Save</button>
	<button data-action="cancel" class="btn btn-default">Save</button>
</div>

<!-- Binding image to img
	 - data-attr="src:url"
	 - data-null-image: will use this image when data is null
-->
<img class="img-responsive thumbnail pull-left" 
	 data-attr="src:/file/db/info/dsKommentarer/Bilde/<%=PrimKey%>/<%=Bilde%>?height=35" 
	 data-null-image="/static/graphics/camera-icon.svg">

<!-- Binding url anchor
	 - data-attr="href:url"
-->
<img class="img-responsive thumbnail pull-left" 
	 data-attr="href:/file/db/info/dsKommentarer/Bilde/<%=PrimKey%>/<%=Bilde%>?height=35" >

<!-- Binding crop with save
	data-crop: enables crop for img. If empty, filestore will be used. If not the value should be varbinary field from table.
	data-ratio: sets the crop ratio (width/height)
	-->
<img data-object-id="dsPerson" 
		data-crop="Bilde" 
		data-ratio="1" 
		data-attr="src:/file/db/brukerinfo/dsPerson/Bilde/<%=PrimKey%>/<%=Bilde%>" 
		data-null-image="/static/graphics/camera-icon.svg" >

<!-- Binding fileuploader: Provides drag & drop and fileupload
     - data-object-id
	 - data-upload
-->
<div data-upload class="file-upload-control col-xs-12" data-object-id="dsFiler" id="arkivUploader">
	<!-- put your markup here -->
</div>

<!--Upload link to trigger filechooser-->
<a href="#" class="pull-right text-muted" data-upload-target="arkivUploader">velg fil(er) for opplast...</a>




dataobject web web-templating · Perma link post comment Posted by: Sigmund Lunde (09-nov-2014)

3

Web-Templating: data-templating="item-list" or data-templating="current-item"

<!--   Databinding attributes:

	data-object-id="dsRecords" (defining the scope)

   	data-templating="item-list" (will look for data-item-template and then render 
	 one copy of the relevant template per record)
	data-templating="current-item" (will look for data-item-template and render one copy 
	 of the relevant template for current record only)

   	data-item-template="default" (root element for the default item template)
	data-item-template="current-item"
	data-item-template="current-item-edit"
	data-item-template="new-item-edit"
	data-item-template="no-data" (rendered if there are no data returned from database)
	data-add-class-if="test:className" //test must be a javacript condition: data.fieldName === 'Test':MyClass
	data-remove-class-if="test:className" //test must be a javacript condition: data.fieldName === 'Test':MyClass
	
	
   	data-field="FieldName"	(used in elements to bind data)
   	data-datepicker="date" / "datetime" / "time"
	data-attr="src:/file/db/Persons/dsPersons/<%=PrimKey%>/<%=ImageCRC%>" 
	data-attr="href:/persons?<%=ID%>"
	
   	data-action="save" (used in button elements: click button will save record to database)
   	data-action="cancel" 
   	data-action="delete" 
   	data-action="edit" 
   	data-action="new" (used in button elements: set dataobject.currentRow to -1 and fire beginEdit)
   	data-action="clear"  (used in dropdowns to clear fieldvalue)
   	data-action="done"  (saves if dirty, cancel if not dirty)
	data-action="next" 
	data-action="previous" 

   	data-show-newitem (in item-list: allways shows UI for new record, if not present or "false"
	you will need to use an action to show new record UI)
	
	data-edit-focus (used in current-item-edit and new-item-edit for choosing a specific element that should have focuse when entering edit mode)
	
	functions:
	data-template-function (used if custom template is needed. Return name of custom template and this will be used insated of current active template. Must be located on rootelement)
	data-function (can be used on any element and will be executed for each row-rendering)
--->

<!-- Simple bound list of items (all records using same template)-->
<div data-templating="item-list" data-object-id="dsPersons">
  <div data-item-template="default">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
</div>

<!-- Simple bound list of items, highlighting current-item by introducing a second template -->
<div data-templating="item-list" data-object-id="dsPersons">
  <div data-item-template="default">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
  <div data-item-template="current-item" class="active">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
</div>

<!-- Simple bound list of items, editing current-item -->
<div data-templating="item-list" data-object-id="dsPersons">
  <div data-item-template="default">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
  <div data-item-template="current-item" class="active">
    <h4 data-field="Name"></h4>
	<input type="text" data-field="Address"></input>
	<br>
	<input type="text" data-field="ZipCode"></input>
	<input type="text" data-field="City"></input>
  </div>
</div>

If you need a list of editable items: put inputs in the "default" template.

If you want a popup form for editing, make a "current-item-edit" template with a bootstrap
modal element (you need to trigger the edit by calling the beginEdit on the dataobject.

To trigger an edit, use a button with data-bind="edit"

If you would like to allways show a "new blank record" (enabling the user to input a new item)
just set the "data-show-newitem" attribute (in the data-list root element).

dataobject web web-templating · Perma link post comment Posted by: Sigmund Lunde (07-nov-2014)

Robert Vinkovic :
Solution, not the only one but the only one I have managed to make work: parent div must have data-list="manual-edit" with 2 child divs one with data-item-template="read-only" and one with "edit" (22-jan-2015)
Peter Butt :
(23-feb-2015)
Martin Vaaden :
Tried using data-remove-class-if some time ago, but seems like it's not in use any more (?) Seems like data-add-class-if will add class if check == true and remove if check == false (12-jun-2015)
1

Select, web-templating, add options from datasource

<!-- 
	To create options in a select element use data-options="dataSource" and specify data-option-text="field" (and data-option-value if different from data-option-text)
-->
<select class="form-control" 
	data-field="Categories"
	data-options="dsCategories"
	data-option-text="Category">

	<!-- Generated options (from data-options datasource) will not replace any options allready in your markup -->
	<option class="text-muted">(choose a category)</option>	
</select>

dataobject web web-templating · Perma link post comment Posted by: Peter Øren (23-des-2014)

1

Date date-picker web-templating

<!-- To activate the datepicker use an input with type="text" and add attribute data-datepicker -->

<input type="text" 
		data-field="StartDato"
		data-datepicker="date/datetime"  
		data-startmode="years/months/dates" 
		data-format="Short Date">

<!-- data-startmode is optional, default is dates, you can set it to years or months -->
<!-- data-format is optional, default for date is "Short Date" and default for datetime is "General Date Short Time" -->

web web-templating · Perma link post comment Posted by: Sigmund Lunde (19-des-2014)

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)

0

Appframe Web Templating - Overview

<!-- Appframe Web Templating

Scope:
Add data-object-id="dsMyData" to an element to create a databound scope. This element
and all sub-elements will have the same scope (until you specify another data-object-id).

Lists:
Use data-templating="item-list" to render one copy of your template per record.

Current-Item:
Use data-templating="current-item" to render one copy of your template for current record only

Template IDs:
Mark the root of your template with data-item-template="default" or any of the following template IDs
	"current-item"
	"current-item-edit"
	"new-item-edit"
	"no-data"
The template engine will look for templates from the bottom of the list. For a new record it 
will first look for new-item-edit. If this is not found it will look for current-item-edit, then 
it will look for current-item, and then finally it will pick default if no other templates are defined.

Binding Updatable Fields:
Use data-field="MyField" to databind an element to a field in your dataobject.
You will get 2-way binding, changes to the data-object will show in the element,
and input/changes in the element will be posted to the dataobject

Binding Attributes:
Use data-attr="src:/images/<%=PictureName%>" This is a one way binding (nothing is posted back to the dataobject)
Use data-attr="href:/persons?<%=PersonID%>"
Use data-current-index to bind current index to element
Use data-record-count to bind datalength to element

Actions:
Use data-action="save" to force the data-object to save changes to the database
Use data-action="new" to add a new record
Use data-action="cancel" to abort editing (and make any edited values go back to their saved state)
Use data-action="edit" to set the dataobject into edit-mode (and change template(s) if relevant)
Use data-action"delete" to delete current record
Use data-action="done" to save if there are changes or cancel editmode if not dirty
Use data-action="next" to move to next item in dataobjet
Use data-action="previous" to move to previous item in dataobjet

Select:
Use data-options="dsMyOptionsDatasource" in a <SELECT> element to create <OPTION> elements.
Use data-text="MyFieldname" to set option text
Use data-value="AnotherFiledname" to set option values (optional)

Lookup:
Use data-templating="lookup" and add an id="myID" to define a lookup
Use data-display-fields="MyField, AnotherField" to set what fields should be displayed in the lookup
The lookup can be used several places in the page.
To use the lookup for an input set data-lookup-id="myID"
and set data-lookup-bindings="field1=field2, field3=field4"

Datefields/Date-pickers:
Use type="text" and data-datepicker="date" to enable datepicker for a date field.
Use type="text" and data-datepicker="datetime" to enable date and time picker for a datetime field.

-->

dataobject web-templating · Perma link post comment Posted by: Sigmund Lunde (27-des-2014)

0

Declarative data binding of fields and buttons

<!-- You can declaratively bind fields and buttons by adding a some data-attributes -->
<!-- To bind fields you specify a data-object-id attribute and a data-field attribute -->
<!-- Declarative field binding supports the following element types -->

<!-- Uneditable text (the form-control-static is for when used in a bootstrap3 form) -->
<p class="form-control-static" data-object-id="dsSomething" data-field="SomeField"></p>

<!-- Editable elements -->
<input type="text" data-object-id="dsSomething" data-field="SomeField">
<textarea data-object-id="dsSomething" data-field="SomeField"></textarea>
<select data-object-id="dsSomething" data-field="SomeField">
	<option>Foo</option>
    <option>Bar</option>
</select>


<!-- To bind buttons you specify a data-object-id attribute and a data-action attribute -->
<!-- The currently supported actions are: new, save, cancel, delete, previous and next -->
<!-- You can use input type="button" element, but it is recommended to use button elements -->
<!-- (The btn class is to get bootstrap3 style on the buttons. For appframe style use afButton) -->
<button class="btn" data-object-id="dsSomething" data-action="new">New</button>
<button class="btn" data-object-id="dsSomething" data-action="save">Save</button>
<button class="btn" data-object-id="dsSomething" data-action="cancel">Cancel</button>
<button class="btn" data-object-id="dsSomething" data-action="delete">Delete</button>
<button class="btn" data-object-id="dsSomething" data-action="previous">Previous</button>
<button class="btn" data-object-id="dsSomething" data-action="next">Next</button>

web web-templating · Perma link post comment Posted by: Jan Henrik Høiland Meling (06-feb-2014)

0

Getting Started - Declarative Filter Panel

<div data-filter-target="dsIssues,dsAreas">
<!--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="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 = 'To Be Reviewed')">To be reviewed</a>
    </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>
</div>

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