Blapy Datatable

Form Search

<!-- end chunk blapyDiv --> <form id="form_10070" class="col-xs-12 style1" action="/blapy-demos/blapy-table/data/test-json-data.json" method="GET" onsubmit="" data-blapy-noblapydata="1" > <!-- start formInputField 10071 / / --> <!-- start chunk redirectIfDirectAccessToResource -10071 / 10017 --> <!-- end chunk redirectIfDirectAccessToResource --> <div id="input_10071" class="col-xs-12 col-sm-3" style="" > <div class="form-group"> <div > <label class="control-label" for="search_10071"> <!-- begin displayTitleSection 10071 --> <div class=" noinit formInputFieldTitle"> <div class="formInputFieldTitle titleWithNoLine" style="font-weight:bold," data-minfontsize="8" data-maxfontsize="100" data-fittextsize="" data-displayRefWidth="1332" ><span > <span id="siteeditor-longtitle-10071-rte" href="/rest/newsiteeditor/longtitle/10071" field="longtitle" method="PUT" class="siteeditor " data-resourceid="10071" data-successmsg="Modification effectuée" >Search</span> &nbsp; </span> </div> </div> <!-- end equalHeight --> <!-- end displayTitleSection --> </label> </div> <div> <input type="text" class="form-control" name="FORM_Search" id="search_10071" placeholder="" value="{{firstname}}" > </div> </div> </div> <!-- end formInputField --> <!-- start TPL 300-600-blapyFormSelectOptions 10122--> <!-- start chunk redirectIfDirectAccessToResource -10122 / 10017 --> <!-- end chunk redirectIfDirectAccessToResource --> <script> //load selectpicker function initSelectOption_10122() { let getScriptProcessing = false; function startBootstrapSelect() { //debugger; $(document).find('#select_searchlastname_10122').selectpicker( $.extend({},{ iconBase: 'far' ,tickIcon:'fa-check' }) ); getScriptProcessing = true; } $(document).on( "Blapy_PageReady","body", function(event,anError) { $.loadFileOnce("/assets/libraries/bootstrap-select/js/bootstrap-select.js") .done( function() { $.doTimeout("timeout_select_searchlastname_10122",400,function(){ if ($(document).find('#select_searchlastname_10122').length) { //debugger; startBootstrapSelect(); return false; } return true; }); }); });//end on blapy_pageready //include specific code of select window.initSelectedOption_10122 = function(aJson) { if (!Array.isArray(aJson)) return aJson;//not an array...?? let aValueToSelect = "{{lastname}}"; if (aValueToSelect == "") return aJson; aInputTag = "lastname"; if (aInputTag == "") return aJson; //debugger; aJson = aJson.map(aData => { if (aData[aInputTag] == aValueToSelect) { aData[aInputTag+"ischecked"]="selected"; } return aData; }); return aJson; } }//end of initSelectOption_10122 if (typeof $ !== "function") { window.addEventListener('DOMContentLoaded', initSelectOption_10122, false); } else initSelectOption_10122(); </script> <div id="selectoptions_10122" class="selectContainer col-sm-3" > <div class="form-group"> <label for="" > <!-- begin displayTitleSection 10122 --> <div class=" noinit formSelectOptionsFieldTitle"> <div class="formSelectOptionsFieldTitle titleWithNoLine" style="font-weight:bold," data-minfontsize="8" data-maxfontsize="100" data-fittextsize="" data-displayRefWidth="1332" ><span > <span id="siteeditor-longtitle-10122-rte" href="/rest/newsiteeditor/longtitle/10122" field="longtitle" method="PUT" class="siteeditor " data-resourceid="10122" data-successmsg="Modification effectuée" >Search on lastname</span> &nbsp;<span class="alert-danger"></span> </span> </div> </div> <!-- end equalHeight --> <!-- end displayTitleSection --> </label> <div id='blapy_10122_div' data-blapy-container="true" data-blapy-container-name="searchlastname_10122" data-blapy-container-content="searchlastname-2025-06-04 - 02:12:30" data-blapy-update="json" data-blapy-template-wrap="<select class='form-control selectpicker show-tick' data-style='btn-warning' name='FORM_SearchLastName' id='select_searchlastname_10122' title='Select a lastname...' onChange='$(&quot;#form_10070&quot;).submit();' >" data-blapy-template-header="<option value=''>Select a lastname...</option>" data-blapy-template-init="/blapy-demos/blapy-table/data/test-json-data.json" data-blapy-template-init-params="{}" data-blapy-template-init-method="GET" data-blapy-template-init-processdata="initSelectedOption_10122" data-blapy-template-mustache-delimiterStart="{+" data-blapy-template-mustache-delimiterEnd="+}" data-blapy-template-init-purejson="1" data-blapy-noblapydata="1" > <|xmp style="display:none"> <option value="{+lastname+}" {+lastnameischecked+} > {+lastname+} </option> <|/xmp> </div> </div> </div> <!-- end 300-600-blapyFormSelectOptions --> <style scoped> #formSubmit_10070, #formReset_10070{ -moz-box-shadow: 0px 1px 0px 0px #ffffff; -webkit-box-shadow: 0px 1px 0px 0px #ffffff; box-shadow: 0px 1px 0px 0px #ffffff; background-color:#4bc4d1; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #35afbc; display:inline-block; cursor:pointer; color:#e7ecef; font-family:Arial; font-size:15px; font-weight:bold; padding:2px 10px; text-decoration:none; text-shadow:0px -1px 0px #227a82; } #formSubmit_10070:hover, #formReset_10070:hover { background-color:#35afbc; color:#2d849a; } </style> <div class="submit_btn col-xs-12"> <div class="submit inner left"> <button id="formSubmit_10070" type="submit" class="btn btn-default" value="Envoyer" onClick="$.imxNotify(&#39;Submit cliqu&#233;&#39;);" > Envoyer </button> </div> </div> </form> <script> if (typeof initFormCode_10070 !== "function") { function initFormCode_10070() { //start JSWebsiteToInclude $("[class^='alert alert-danger']").each(function() {($(this).html()=='')?$(this).removeClass():''}); $("#form_10070 button:submit").click(function(eventObject) { $('#form_10070').find('input,textarea,select').filter('[required]:hidden').prop('required', false); }); // start init /**<!-- start chunk SectionBlapyFormCodeblapyURLDataLink 10070 / -->**/ function addHiddenFields(anArrayName, anArray) { Object.keys(anArray).map(propertyname => { if ( anArrayName == "" ) //SectionBlapy fieldName = propertyname; else if ( !Array.isArray(anArray[propertyname]) && typeof anArray[propertyname] == "object" ) fieldName = anArrayName; else fieldName = anArrayName+"["+propertyname+"]"; if ( Array.isArray(anArray[propertyname]) && typeof anArray[propertyname][0] == "object" ) { addHiddenFields(fieldName, anArray[propertyname]); } else if ( typeof anArray[propertyname] == "object" && ! Array.isArray(anArray[propertyname]) ) { addHiddenFields(fieldName, anArray[propertyname]); } else { $("<input />").attr("type", "hidden") .attr("name", fieldName) .attr("value", anArray[propertyname]) .appendTo("#form_10070"); } }); } /**<!-- end chunk SectionBlapyFormCodeblapyURLDataLink -->**/ /** <!-- start chunk SectionBlapyFormCodeBlapyId 10070 --> **/ $(document).off("submit", "#form_10070"); $(document).on("submit", "#form_10070", function(event) { event.preventDefault(); //debugger; if (!$("#form_10070").attr("data-initDone")) { // {{=<% %>=}} //to skip mustache processing const localData = JSON5.parse("{\"action\":\"search\",\"lastname\":\"{{SearchLastName}}\",\"firstname\":\"{{Search}}\",\"formid\":\"10070\"}"); // <%={{ }}=%> //to reactivate mustache processing addHiddenFields("", localData); $("#form_10070").attr("data-initDone","1"); } // get all the inputs into an array. let $inputs = $(this).serializeArray(); // not sure if you wanted this, but I thought I'd add it. // get an associative array of the values in the form. let formValues = {}; $.each($inputs, function() { if (this.name.indexOf('[]') >= 0) {//this input is an array of input (as select options) let name=this.name.replace('[]',''); if (!formValues[name]) formValues[name]=[]; formValues[name].push(this.value); name = name.replace('FORM_',''); if (!formValues[name]) formValues[name]=[]; formValues[name].push(this.value); //add a variable with the concat of the array... formValues[name+'_concat']=formValues[name].join(); } else { formValues[this.name] = this.value; formValues[this.name.replace('FORM_','')] = this.value; } }); //parse tag values with input $.each($inputs, function() { // {{=<% %>=}} //to skip mustache processing let match = this.value.match(/{{(.*)}}/gy); //search tag field name that could be used from blapyURLData_Link // <%={{ }}=%> //to reactivate mustache processing if (match != null) { formValues[this.name]=Mustache.render(this.value,formValues); } }); //add the submit input info that is not given by the serializeArray if (event.originalEvent) { aSubmitInput = $(event.originalEvent.currentTarget.activeElement); if (aSubmitInput) { //the submit was emitted by an input that is not of submit type (enter on a field perhaps) if (aSubmitInput.attr('type') != 'submit') { //let's get the first submit object aSubmitInput = $(event.originalEvent.target).find("*").filter(':submit:visible:first') } if (aSubmitInput && aSubmitInput.attr('name')) formValues[aSubmitInput.attr('name')] = aSubmitInput.attr('value'); } } let blapy_id = "10061"; let blapy_target = blapy_id.split('->'); let blapyObject=blapy_id+"_div"; if (blapy_target.length>1) { blapyObject = blapy_target[0]; blapy_target= blapy_target[1]; } else { blapy_target= blapy_id; } if ($.isNumeric( blapy_target )) blapy_target = "blapy_"+blapy_target+"_div"; $('#blapy_'+blapyObject).trigger('postData', { aUrl: $(this).attr("action"), params: jQuery.extend({'embeddingBlockId':$('#'+blapy_target).attr('data-blapy-container-name')}, formValues), method: $(this).attr("method"), noBlapyData:$(this).attr("data-blapy-noblapydata") }); });//end on submit /** <!-- end chunk SectionBlapyFormCodeBlapyId --> **/ }//end initFormCode_10070 if (typeof $ !== "function") { window.addEventListener('DOMContentLoaded', initFormCode_10070, false); } else initFormCode_10070(); }//end if </script>

Blapy Table

Combien d'actions à acheter pour un seuil de rentabilité à....

Résultat

<!-- end chunk blapyDiv --> <p>Pour obtenir un nouveau Prix de revient &agrave; <span style="color: #169179;"><strong>{{PSRCible}}&euro;</strong></span> :</p> <ul> <li>Il vous faut acheter <span style="color: #843fa1;"><strong>{{ResultatEntier}}</strong></span> d'actions nouvelles &agrave; acheter au prix de <span style="color: #e67e23;"><strong>{{Price_Stock}}&euro;</strong></span>&nbsp; pour un montant total de <span style="color: #843fa1;"><span style="color: #e03e2d;"><strong>{{Investissement}}&euro;</strong></span><strong>.</strong></span></li> <li>L'investissement total sera apr&egrave;s achat de <strong><span style="color: #e03e2d;">{{TotalInvestissement}}&euro;</span>.<br /></strong></li> </ul> <p>Avec votre capacit&eacute; d'investissement de <span style="color: #e03e2d;"><strong>{{MontantMaxInvestissement}}&euro;</strong></span> :</p> <ul> <li>vous pouvez obtenir <span style="color: #843fa1;"><strong>{{NBActionsPossibles}}</strong></span> actions</li> <li>ce qui permet d'avoir un nouveau Prix de revient de <span style="color: #169179;"><strong>{{PSRPossible}}</strong></span>&euro;</li> </ul> <p>Avec <span style="color: #843fa1;"><strong>{{NbMaxActions}}</strong></span> actions &agrave; acheter :</p> <ul> <li>Le nouveau Prix de revient sera de <span style="color: #169179;"><strong>{{PSRAvecNbMaxActions}}</strong></span>&euro;</li> <li>avec un montant investi de <strong><span style="color: #e03e2d;">{{InvestissementAvecNbMaxActions}}&euro;</span></strong></li> </ul> <p>&nbsp;</p> <!-- streamSection for subsection 11717/ -->

Test blapy object

Ceci est un objet blapy... dans lequel on met des blocs blapy

Information en provenance de l'API Rest: https://www.intersel.fr/tools/getipinfo.json

Blapy login

<!-- end chunk blapyDiv --> <p>Etes-vous loggu&eacute; ?</p> <p id="NotLogged" style="display:none">Vous n'êtes pas loggué</p> <p id="Logged" style="display:none"> Vous êtes loggué<br> Bonjour {{data.fullname}} </p> <p>&nbsp;</p> {{data.code}} <blapyScriptJS> {{#data}}if (!{{status}}){{/data}} $('#NotLogged').attr('style','block'); else $('#Logged').attr('style','block'); </blapyScriptJS> <!-- streamSection for subsection 10097/ -->

suite bloc

<!-- end chunk blapyDiv --> <div> <p>Votre ville : {{city}}</p> <p>Votre pays : {{country_name}}</p> <p>Votre latitude : {{latitude}}</p> <p>Votre longitude : {{longitude}}</p> </div> <!-- streamSection for subsection 10110/ -->

test avec sous-bloc

<!-- end chunk blapyDiv --> <div> <h2>&nbsp;</h2> <h1>{{firstname}} {{lastname}}</h1> <ul> <li>Id : {{id}}</li> <li>Pr&eacute;nom : {{firstname}}</li> <li>Nom : {{lastname}}</li> </ul> <p>&nbsp;</p> <p>&nbsp;</p> </div> <!-- streamSection for subsection 10123/ --> <!-- BEGIN template 300-000-Section-Sections Folder 10124 /sous-bloc-blapy / --> <!-- start chunk redirectIfDirectAccessToResource -10124 / 10017 --> <!-- end chunk redirectIfDirectAccessToResource --> <!-- start standardSection sous-bloc-blapy/10124//10123--> <section id="section_sous_bloc_blapy_10123" class="section_10060_10124 template_section_40" style=" " data-resourceid="10124" > <style scoped> #rowcontainer_sous_bloc_blapy_10123.container { width:100%; } #rowcontainer_sous_bloc_blapy_10123 .container { width:100%; } </style> <div id="rowcontainer_sous_bloc_blapy_10123" class="rowcontainer_10060_10124 template_rowcontainer_40 container" style=" " data-resourceid="10124" > <div class="row"> <!-- start chunk SectionsFolderCode 10124 --> <!-- begin displayTitleSection 10124 --> <div class="equalHeight col-xs-12"> <h2 class="title nofittext" style="" data-minfontsize="8" data-maxfontsize="100" data-fittextsize="" data-displayRefWidth="1332" ><span > <span id="siteeditor-longtitle-10124-rte" href="/rest/newsiteeditor/longtitle/10124" field="longtitle" method="PUT" class="siteeditor " data-resourceid="10124" data-successmsg="Modification effectuée" >Details {{firstname}}</span> </span> </h2> <div class="bottomlinetitle title"></div> </div> <!-- end equalHeight --> <!-- end displayTitleSection --> <!-- start chunk blapyDiv --> <div id="blapy_10124_div" class="subsection" data-blapy-container="true" data-blapy-container-name="details {{id}}" data-blapy-container-content="sous-bloc-blapy_10124-2025-06-04 - 02:12:30" data-blapy-update="json" data-blapy-template-init="/blapy-demos/test-avec-sous-bloc/data-nv-0-details-person.html" data-blapy-template-init-params="{&quot;action&quot;:&quot;search&quot;,&quot;search&quot;:&quot;{{id}}&quot;}" data-blapy-template-init-method="GET" data-blapy-template-mustache-delimiterStart="{%" data-blapy-template-mustache-delimiterEnd="%}" data-blapy-template-init-purejson="1" data-blapy-updateblock-ondisplay="Yes" data-blapy-noblapydata="1" > <|xmp style="display:none;"> <!-- end chunk blapyDiv --> <ul> <li>Age: {%age%}</li> <li>Ville: {%city%}</li> <li>Sexe: {%sex%}</li> </ul> <!-- streamSection for subsection 10124/ --> <!-- BEGIN template 300-000-Section-Sections Folder 10126 /sous-sous-bloc-blapy / --> <!-- start chunk redirectIfDirectAccessToResource -10126 / 10017 --> <!-- end chunk redirectIfDirectAccessToResource --> <!-- start standardSection sous-sous-bloc-blapy/10126//10124--> <section id="section_sous_sous_bloc_blapy_10124" class="section_10060_10126 template_section_40" style=" " data-resourceid="10126" > <style scoped> #rowcontainer_sous_sous_bloc_blapy_10124.container { width:100%; } #rowcontainer_sous_sous_bloc_blapy_10124 .container { width:100%; } </style> <div id="rowcontainer_sous_sous_bloc_blapy_10124" class="rowcontainer_10060_10126 template_rowcontainer_40 container" style=" " data-resourceid="10126" > <div class="row"> <!-- start chunk SectionsFolderCode 10126 --> <!-- begin displayTitleSection 10126 --> <div class="equalHeight col-xs-12"> <h2 class="title nofittext" style="" data-minfontsize="8" data-maxfontsize="100" data-fittextsize="" data-displayRefWidth="1332" ><span > <span id="siteeditor-longtitle-10126-rte" href="/rest/newsiteeditor/longtitle/10126" field="longtitle" method="PUT" class="siteeditor " data-resourceid="10126" data-successmsg="Modification effectuée" >Infos Adresse sur {%city%}</span> </span> </h2> <div class="bottomlinetitle title"></div> </div> <!-- end equalHeight --> <!-- end displayTitleSection --> <!-- start chunk blapyDiv --> <div id="blapy_10126_div" class="subsection" data-blapy-container="true" data-blapy-container-name="info from city {%city%} {{id}}" data-blapy-container-content="sous-sous-bloc-blapy_10126-2025-06-04 - 02:12:30" data-blapy-update="json" data-blapy-template-init="/blapy-demos/test-avec-sous-bloc/data-nv-0-details-city.html" data-blapy-template-init-params="{&quot;action&quot;:&quot;search&quot;,&quot;search&quot;:&quot;{%city%}&quot;}" data-blapy-template-init-method="GET" data-blapy-template-mustache-delimiterStart="{$" data-blapy-template-mustache-delimiterEnd="$}" data-blapy-template-init-purejson="1" data-blapy-noblapydata="1" > <||xmp style="display:none;"> <!-- end chunk blapyDiv --> <ul> <li>CP: {$cp$}</li> <li>R&eacute;gion: {$region$}</li> <li>Pays: {$country$}</li> </ul> <!-- streamSection for subsection 10126/ --> <||/xmp> </div> <!-- end chunk SectionsFolderCode 10126 --> <!-- add modalButton '' in section 10126 --> </div> </div> </section> <!-- end standardSection 10126 --> <!-- END template 300-000-Section-Sections Folder 10126 --> <|/xmp> </div> <!-- end chunk SectionsFolderCode 10124 --> <!-- add modalButton '' in section 10124 --> </div> </div> </section> <!-- end standardSection 10124 --> <!-- END template 300-000-Section-Sections Folder 10124 -->

Un bloc blapy

<!-- end chunk blapyDiv --> <!-- streamSection for subsection 10089/ -->

Quelques resources dynamiques....

<!-- end chunk blapyDiv --> <div>{{{pagetitle}}} - {{publishedon}}</div> <!-- streamSection for subsection 10119/ --> <!-- BEGIN template 300-000-Section-Sections Folder 10121 /test-stream-blocs / --> <!-- start chunk redirectIfDirectAccessToResource -10121 / 10017 --> <!-- end chunk redirectIfDirectAccessToResource --> <!-- start standardSection test-stream-blocs/10121//10119--> <section id="section_test_stream_blocs_10119" class="section_10060_10121 template_section_40 col-sm-12" style="clear:none; background-color:#e7e7e7;" data-resourceid="10121" > <style scoped> #rowcontainer_test_stream_blocs_10119.container { width:100%; } #rowcontainer_test_stream_blocs_10119 .container { width:100%; } </style> <div id="rowcontainer_test_stream_blocs_10119" class="rowcontainer_10060_10121 template_rowcontainer_40 container" style="clear:none; " data-resourceid="10121" > <div class="row"> <!-- start chunk SectionsFolderCode 10121 --> créé le : {{createdon}} {{#content}} Contenu: {{{content}}} {{/content}} {{^content}} Pas de contenu... {{/content}} {{#contentIsEmpty}} <p>Après controle avec la fonction testIfContentIsEmpty... on confirme! c'est bien vide!</p> {{/contentIsEmpty}} <!-- streamSection for subsection 10121/ --> <!-- end chunk SectionsFolderCode 10121 --> <!-- add modalButton '' in section 10121 --> </div> </div> </section> <!-- end standardSection 10121 --> <!-- END template 300-000-Section-Sections Folder 10121 -->