Below this text is the HTML-Code to be transcluded to provide a filter for a display table macro using the remote controlled feature. The javascript code uses the variable initialwhere which can be replaced using the transclusion variable replacement feature and be set to the initial where condition used in the display table macro. Morover two more variables have to be set to provide options for a dropdown. Full example replacement to put in transclusion box to disable the dropdown: tableid=fitered initialwhere=$<DirectAncestorId>=[112494396]
datalistselects=<datalist id="selects"></datalist>
datalistwhere=<datalist id="wheres"></datalist>
Full example replacement to put in transclusion box to set values for the dropdowns: tableid=filtered initialwhere=$<DirectAncestorId>=[112494396]
datalistselects=<datalist id="selects"><option value="Name">Name only</option><option value="Name, Short Description, Iteration">With Iteration</option></datalist>
datalistwhere=<datalist id="wheres"><option value="$<Iteration>=[Facade]">Facade</option><option value="$<Iteration>=[Filled]">Filled</option><option value="$<Iteration>=[Finished]">Finished</option></datalist>
| Section |
|---|
| | HTML |
|---|
<form id="filterForm${tableid}" action="">
select:
<input id="filterSelect${tableid}" size="50" type="text" list="selects${tableid}" name="select" >
${datalistselects}
where:
<input id="filterWhere${tableid}" size="50" type="text" list="wheres${tableid}" name="where">
${datalistwheres}
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<script>
AJS.toInit(function() {
var urlParams = new URLSearchParams(window.location.search);
var originalSelect = urlParams.get('${tableid}:select');
var originalWhere = urlParams.get('${tableid}customWhere');
var initialWhere = urlParams.get('${tableid}initialWhere');
console.error("####################################");
if (initialWhere != null && initialWhere.trim())
{
console.error("*****************************************");
console.error("*****************************************");
console.error("initial where is NOT empty");
console.error("*****************************************");
console.error("*****************************************");
}
else
{
console.error("*****************************************");
console.error("*****************************************");
console.error("initial where is empty");
console.error("*****************************************");
console.error("*****************************************");
initialWhere = $('#${tableid} table').attr('data-projectdoc-query-where');
}
console.error("####################################"+initialWhere);
$('#filterForm${tableid} datalist').attr('id', function(index, id) {
return id+"${tableid}";
})
$("#filterSelect${tableid}").val(originalSelect);
$("#filterWhere${tableid}").val(originalWhere);
function appendToQueryString( queryString, queryParam ) {
if(queryString.trim())
{
queryString=queryString + "&" + queryParam;
}
else
{
queryString="?"+queryParam;
}
return queryString;
};
$('#filterForm${tableid}').submit(function(evt) {
evt.preventDefault();
var tableId = "${tableid}";
var $select = $('#filterSelect${tableid}').val();
var $where = $('#filterWhere${tableid}').val();
var $queryString="";
$queryString=appendToQueryString($queryString, "${tableid}initialWhere=" + encodeURI($initialWhereinitialWhere));
if ($select.trim())
{
var $encodedSelect = encodeURI($select);
var $selectQueryParam = tableId + ":"+"select"+"="+$encodedSelect;
$queryString=appendToQueryString($queryString, $selectQueryParam);
}
if ($where.trim())
{
var $encodedCustomWhere = encodeURI($where);
var $customWhereQueryParam = "${tableid}customWhere"+"="+$encodedCustomWhere;
var $encodedWhere = encodeURI($initialWhere + " AND " + $where);
var $whereQueryParam = tableId + ":"+"where"+"="+$encodedWhere;
$queryString = appendToQueryString($queryString, $whereQueryParam);
$queryString = appendToQueryString($queryString, $customWhereQueryParam );
}
$action = window.location.href.split('?')[0] + $queryString;
$('#filterForm').attr('action', $action);
console.debug($action);
window.location.href=$action;
});
});
</script> |
|
| Section |
|---|
| | Code Block |
|---|
<form id="filterForm${tableid}" action="">
select:
<input id="filterSelect${tableid}" size="50" type="text" list="selects${tableid}" name="select" >
${datalistselects}
where:
<input id="filterWhere${tableid}" size="50" type="text" list="wheres${tableid}" name="where">
${datalistwheres}
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<script>
AJS.toInit(function() {
var urlParams = new URLSearchParams(window.location.search);
var originalSelect = urlParams.get('${tableid}:select');
var originalWhere = urlParams.get('${tableid}customWhere');
$('#filterForm${tableid} datalist').attr('id', function(index, id) {
return id+"${tableid}";
})
$("#filterSelect${tableid}").val(originalSelect);
$("#filterWhere${tableid}").val(originalWhere);
function appendToQueryString( queryString, queryParam ) {
if(queryString.trim())
{
queryString=queryString + "&" + queryParam;
}
else
{
queryString="?"+queryParam;
}
return queryString;
};
$('#filterForm${tableid}').submit(function(evt) {
evt.preventDefault();
var tableId = "${tableid}";
var $initialWhere = "${initialwhere}"
var $select = $('#filterSelect${tableid}').val();
var $where = $('#filterWhere${tableid}').val();
console.debug($select);
console.debug($where);
var $queryString="";
if ($select.trim())
{
var $encodedSelect = encodeURI($select);
var $selectQueryParam = tableId + ":"+"select"+"="+$encodedSelect;
$queryString=appendToQueryString($queryString, $selectQueryParam);
}
if ($where.trim())
{
var $encodedCustomWhere = encodeURI($where);
var $customWhereQueryParam = "${tableid}customWhere"+"="+$encodedCustomWhere;
var $encodedWhere = encodeURI($initialWhere + " AND " + $where);
var $whereQueryParam = tableId + ":"+"where"+"="+$encodedWhere;
$queryString = appendToQueryString($queryString, $whereQueryParam);
$queryString = appendToQueryString($queryString, $customWhereQueryParam );
}
$action = window.location.href.split('?')[0] + $queryString;
$('#filterForm').attr('action', $action);
console.debug($action);
window.location.href=$action;
});
});
</script> |
|
| 