Filtrar un módulo VIEW por javascript

En este ejemplo veremos cómo crear un módulo flx-view por HTML y, utilizando código javascript, veremos cómo filtrar el objeto que queremos visualizar.

Para ello, puede realizar la prueba en la utilidad HTML Editor, accesible desde el área de administración - Herramientas

En la parte superior, pondremos una caja de texto y debajo pintaremos un módulo con la visualización de un objeto del sistema. Por defecto saldrá el objeto SysIcon.

Para testearlo, pondremos el nombre de un objeto del sistema y, al pulsar en el botón filtrar, veremos la visualización del objeto encontrado.

Código HTML

<!-- Inputs for filtering -->
<div class="myJSFilters">
  <flx-text id="txtObjName" type="text" placeholder="Type an object name and press filter!"></flx-text>
</div>
<button onclick="initTest()" class="btn bg-info">Filter</button>


<!-- Sample generic list module -->
<flx-module modulename="sysmod-list-generic" type="flx-view" class="default" title="Objects">
  <div class="cntBody">
    <flx-view mode="view" objectname="SysObject" objectwhere="ObjectName='sysicon'" id="mod-sysmod-list-generic" modulename="sysmod-list-generic"></flx-view>
  </div>
</flx-module>

Código Js

function initTest(){
  debugger;
  
  //Find list module using id
  var listMod=$('#mod-sysmod-list-generic')[0];
  var texto=$('#txtObjName').val();
  //If input  has value apply to additionalWhere
  if($('#txtObjName').val()==''){
    listMod.attr('objectwhere','Objects.ObjectName=x');
  }else{
    $('#mod-sysmod-list-generic').attr('objectwhere',"(Objects.ObjectName ='"+texto+"')");
  }
  
  //Refresh list module
  listMod.init();
  
}

CSS

.myJSFilters {
  margin-right: 10px;
  width:300px;
  float:left;
}

flx-module[modulename="sysmod-list-generic"]{
  margin-top:25px;
}

#divResult{margin-top:25px;}

0 Votos