Advanced Concepts

The HTML Kit provides developers with easy ways to work with their data. It also provides more advanced functionalities.

Advanced Queries

Adding the class dv-get-all:inventory:products will get you data from the table products under the service inventory . This is well explained here . Its possible to craft more advanced queries using the query parameters below:

Lets assume we have an inventory service which has a table products from which a query is being made

Query Keyword

Usage

Explanation

size

class="dv-param:size:1:get-all:inventory:products "

The size parameter makes it possible to get a limited number of records

where

class="dv-param:where:id^2:get-all:inventory:products "

The where parameter allows for querying data where a key contains a specific value. In this case where the id is 2.

orWhere

class="dv-param:where:id^1-param:orWhere:price^1:get-all:inventory:products "

The orWhere parameter is mostly used together with the where parameter. This allows one to query for data where the column contains a value orWhere it another column matches a certain value

greaterThan

class="dv-param:greaterThan:id^1:get-all:inventory:products

The greaterThan parameter will get all records where the key is greater than the given value. In this case all products with ids greater than 1

lessThan

class="dv-param:lessThan:id^2:get-all:inventory:products"

The lessThan parameter will get all records where the key is greater than the given value. In this case all products with ids less than 2

offset

class="dv-param:offset:2-param:size:1:get-all:inventory:products"

An offset of 2 will ignore the first two records in the database , returning data from the third record in the database. Combining the offset with size gives pagination

search

class="dv-param:search:name^shoes:get-all:inventory:products"

The search parameter allows to search a table column that contains a keyword. The match may be an exact one or a partial match

randomize

class="dv-param:randomize:1-get-all:inventory:products"

This parameter allows records to be populated in a more random form

orderBy

class="dv-param:orderBy:price-get-all:inventory:products dv-label:front_page"

This allows for records to be ordered in descending order based on a particular field

notEqual

@param string: key eg age @param value eg 22

Get all records whose age is not equal to 22

NB: Its possible to pair up multiple parameters for a query eg: class="dv-param:search:name^shoes-param:randomize:1-get-all:inventory:products This will return results containing the name shoes in a random order. Also parameter values may be passed in via URL query strings . eg class="dv-param:search:searchQuery-get-all:inventory:products" to make this more dynamic you may pass the searchQuery via the URL using a query string eg: mydevless.herokuapp.com/?searchQuery=name^shoes this will replace searchQuery with name^shoes

Intercepting Queried Data

Getting the records from a table and rendering it is straight forward. Sometimes you might want to pre-process this data before rendering. To do this you will have to intercept the query using the dvInterceptQueryResponse hook and Javascript .

Eg: Lets say we will like to capi talize every name before rendering to screen

<div class="dv-get-all:inventory:products dv-label:front_page">
<span class="var-name"></span>
<span class="var-price"></span>
<br>
</div>
<script type="text/javascript">
dvInterceptQueryResponse = function(resp) {
for( each in resp.front_page) {
resp.front_page[each].name = resp.front_page[each].name.toLocaleUpperCase();
}
return resp;
}
</script>

The dv-label class serves as an identifier for the query data action and makes it possible to access the record from within JavaScript

Intercepting submitted Data

<div class="dv-notify"></div>
<form class="dv-add-oneto:inventory:products dv-label:admin">
<input type="text" name="name"><br>
<input type="number" name="price"><br>
<button type="submit">add</button>
</form>
<script type="text/javascript">
dvInterceptSubmission = function(resp) {
resp.admin.name = resp.admin.name.toLocaleUpperCase();
return resp;
}
</script>

The example above describe the interception of data about to be submitted to DevLess and capitalizing the name before it finally gets to DevLess.