nuBuilder Forum

Posted: **Mon Jun 23, 2014 7:45 pm**

Hi,

I'm trying to dynamically filter a Browse form displayed in a tab of an Edit form :

BFinEF.png

Browse form is based on a view and then filter with the pk (prf_id) from the record of the Edit form :

SELECT * FROM v_liste_suivi_eleve_referent
WHERE lser_referent_id = '#prf_id#'
ORDER BY lser_nom_interne, lser_no_periode, lser_identite ASC

Dropdown boxes are populated with 2 SQL queries also filtered with the pk used above :

Code: Select all

SELECT DISTINCT lser_nom_interne, lser_nom_interne
FROM v_liste_suivi_eleve_referent
WHERE lser_referent_id = '#RECORD_ID#' ORDER BY lser_nom_interne ASC

The corresponding fields filter_dd_classes & filter_dd_periode don't exist in the table used by the Edit form, so they can't be saved (even if they're considered as "data_saveable").

On load, the nuFORM.form_data for the Browse form is populated with empty values for the 2 above fields.
How can I pass the values from the Edit form to the nuFORM.form_data of the Browse form with JavaScript and onchange event for each dropdown ?

If it's possible, a click on the Find (Chercher) button will then filter the Browse form according to the values in filter_dd_classes & filter_dd_periode fields.
To do so, I will also need to modify my previous SQL query for the Browse form to something like that :

Code: Select all

SELECT * FROM v_liste_suivi_eleve_referent
WHERE lser_referent_id = '#prf_id#'
AND lser_classe = '#filter_dd_classes#'
AND lser_periode =  '#filter_dd_periode#'
ORDER BY lser_nom_interne, lser_no_periode, lser_identite ASC

But I'm completely lost in javascript/jquery/DOM and I have no idea how to pass those values at the right place.

Thanks for any help.

Posted: **Tue Jun 24, 2014 1:55 am**

fat115,

You can create new hash variables with nuSetHash('bob', 'hello')

http://wiki.nubuilder.net/index.php/Jav ... C_value.29

They will also stay with that Form and can be accessed like this..

Code: Select all

console.log(nuFORM.bob);

or

Code: Select all

console.log(nuGetHash('bob'));

(does the same thing).

Steven

Posted: **Wed Jun 25, 2014 3:30 pm**

I've already try with nuSetHash() but it didn't work the way I wanted.

I've finally found how to do what I want with only some SQL code and JS. Here is the result :

BF_unfiltered.png

And selecting a value in the 'Classe' dropdown, Browse form is immediately filtered :

BF_filtered.png

To achieve this, you need :

a form to display as "Browse" object
a '"base" form which associated Edit form will content the Browse form
some JS and SQL

First, in the "base" form, you need to put some JS (Custom Code > Javascript).

Code: Select all

function nuLoadEdit() {
	$( "#nuTabAreaHolder" )
		.find( "select[id^='filter_dd_']" )
		.each(function() {
			$(this).attr('onchange', $(this).attr('onchange').replace('nuSetEdited();',''));
		});
}

function UpdateFilterHashData(fltr,newvalue) {
	obj = window.hashData;
	for(var i = 1 ; i < obj.length ; i++) {
		if (obj[i].field == fltr) {
			obj[i].value = newvalue;
		};
	};
	$( "#browse_eleves" ).contents().find("#nuSearchButton").click();
}

function SelectFilterClasses() {
	valeur = document.getElementById('filter_dd_classes').value;
	UpdateFilterHashData('filter_dd_classes', valeur);
}

function SelectFilterPeriode() {
	valeur = document.getElementById('filter_dd_periode').value;
	UpdateFilterHashData('filter_dd_periode', valeur);
}

Function nuLoadEdit() will remove the nuSetEdited() value from the onchange event of the dropdown boxes (they must be named filter_dd_something). Then, selecting a value from one of these dropdown will not highlight the save button.
Function UpdateFilterHashData will put a value in the HashData object for the field corresponding to the dropdown filter. Next, it will click on the Search button of the form to filter.
Functions SelectFilterSomething() read the value selected in the dropdown filter and pass it to UpdateFilterHashdata. They are called by a onchange event on the dropdown.

Second, in the "base" form, you need one or more dropdown object.
Field Name must begin by "filter_dd_" as above to be retrieved by the nuLoadEdit() function.
You need to add an event name "onchange" firing SelectFilterSomething() and a SQL query to populate the dropdown.
Here is an example :

filter_dd.png

The SELECT DISTINCT is due to the fact I only want unique values from the field named "Classes" in the first picture. #RECORD_ID# will be replaced by the pk of the record edited => http://wiki.nubuilder.net/index.php/Has ... CORD_ID.23

Third, you need to add a browse object in your Edit form.
Mine is named "browse_eleves", and refer to a view described later.
The name is used in the UpdateFilterHashData function to find the iframe

And finally, the Browse form (mine refers to a view).
From the table containing the data you want to display, you need to customize the SQL. For example, this is one of mine :

Code: Select all

SELECT * FROM v_liste_suivi_eleve_referent
WHERE lser_referent_id = '#prf_id#'
AND IF('#filter_dd_classes#' !='',lser_nom_interne = '#filter_dd_classes#',1)
AND IF('#filter_dd_periode#' !='',lser_no_periode = '#filter_dd_periode#',1)
ORDER BY lser_nom_interne, lser_no_periode, lser_identite ASC

Hash variable #prf_id# will be replaced by its value from the "base" form.
#filter_dd_classes# & #filter_dd_periode# will be replaced by their values, which are put in hashData by the UpdateFilterHashData fucntion.
The IF statement is here to ensure that SQL query will always be valid. If filter_dd_classes or filter_dd_periode are not defined the WHERE clause will be "WHERE lser_referent_id = '#prf_id#' AND 1 AND 1", else if only filter_dd_classe is defined it will be "WHERE lser_referent_id = '#prf_id#' AND lser_nom_interne = 'value' AND 1". lser_nom_interne is the name of the field filtered (displayed as Classes on the first picture), value is the value selected in the dropdown box.

To improve the display of the Browse form, I've removed the input search box and its associated button, the tick boxes to select search columns and modify the css to remove empty spaces. It can be easily made putting this JS in the Custom Code > Javascript area of the Browse form :

Code: Select all

function nuLoadBrowse() {
    $( "#nuBrowseTabAreaHolder" )
        .find( "div[id^='row_']" )
        .off("click"); //remove click on rows
    $( "#nuTabTitleHolder" )
        .find( "input[id^='nusearch_']" )
        .css("visibility", "hidden"); // hide tick boxes
    $( "#nuActionButtonHolder" )
        .css("visibility", "hidden"); // hide search area and button
    $( "#nuShadeHolder" )
        .css("top", "0px");
    $( "#nuShadeHolder" )
        .css("bottom", "0px");
    $( "#nuHolder" )
        .css("height", "-=118px");
}

Hope this will help someone else.

Posted: **Thu Jun 26, 2014 2:40 am**

nuBuilder Forum

Browse form in a Edit form : extended filters

Browse form in a Edit form : extended filters

Re: Browse form in a Edit form : extended filters

Re: Browse form in a Edit form : extended filters

Re: Browse form in a Edit form : extended filters