Add 2 columns to the browse form

[calida82]

Hi, my name is Daniele, I would like to switch my application from access to nubuilder. I have a problem. I would like to add 2 columns to the browse form. For each record of the browse form I want to add 2 buttons. One to go to the edit form of the selected record and another to go to another browse form that displays the records related to the selected record. how can i accomplish this?

[kev1n]

Hi Daniele,

This should help you get started:

https://github.com/nuBuilder/nuBuilder- ... te_buttons

Intead of calling deleteRow() you would use nuForm() to open the edit or browse form.

[calida82]

Hi kev1n,
I followed the link and managed to add the first button, but I'm having trouble with the second.
I saw that the button takes the place of one of the columns, the problem is that I need to display all fields except the id which is covered by the first button. I tried to add a new calculated field to the query but in this way all the data of the query disappear .

Code: Select all

SELECT NOMINATIVO, CITTA, INDIRIZZO...   .. (2*1) AS NEWCOLUMN

[kev1n]

Use NULL inthe Display column and a space as Title.

[calida82]

Here I am again, I am taking my first steps. I adapted that code to my case like this

Code: Select all

function getFormId() {
  return nuCurrentProperties().form_id;
}

function nuSelectBrowse(e) {
  
  // If a delete button is clicked, don't open the Edit Screen. 
  
  var col = $(e.target).attr('data-nu-column');
  if (col !== '0' && typeof col !== "undefined") {
      var r = $(e.target).attr('data-nu-primary-key');
      nuForm(getFormId(), r);
  }

  return false;
}


function deleteRow(pk) {

 // Call the PHP procedure deleteRow if the confirm dialog is accepted
 
 if (confirm(nuTranslate("Delete This Record?"))) {
      
      // Set hash cookies: form id and record id. They will be used in the PHP procedure.
      nuSetProperty('deleteRow_form_id', getFormId());
      nuSetProperty('deleteRow_record_id', pk);

      nuRunPHPHidden("deleteRow", 1);
  }

}

// This function is called after a successful delete operation.
function afterDeleteRow() {    
  // Refresh the Browse Screen
  nuSearchAction();    
}

// Creates a new button and assigns click event
function createEditButton(target, pk) {

var btn = $('<button type="submit" style="height:21px; border: none; vertical-align: top; background-color: #d54d49; transform: translateY(-10%); color:white" value="✖">✖</button>');
$(target).html(btn).attr('title',nuTranslate('Modifica'));
btn.on('click',function(){
  //deleteRow(pk);
  
  nuMessage(pk);
});



}

function createViewButton(target, pk) {

var btn = $('<button type="submit" style="height:21px; border: none; vertical-align: top; background-color: #d54d49; transform: translateY(-10%); color:white" value="v">v</button>');
$(target).html(btn).attr('title',nuTranslate('Visualizza'));
btn.on('click',function(){
  //deleteRow(pk);
  
  nuMessage(pk);
});



}
function addViewButtons(column) {
  
  $("[data-nu-column='" + column + "']").each(function(index) {

      // Create delete buttons if the row is not empty / primary key attribute exists
      var pk = $(this).attr('data-nu-primary-key');
      if (typeof pk !== "undefined") {
          createViewButton(this, pk);
      }
  })

}

function addEditButtons(column) {
  
  $("[data-nu-column='" + column + "']").each(function(index) {

      // Create delete buttons if the row is not empty / primary key attribute exists
      var pk = $(this).attr('data-nu-primary-key');
      if (typeof pk !== "undefined") {
          createEditButton(this, pk);
      }
  })

}
if (nuFormType() == 'browse') {
  // Add delete buttons in the first column 
  addViewButtons(0);
  addEditButtons(1);
  
}

the two buttons are there but I wonder if this is the right way. I know the visual basic languages ​​but not the java ...
in my test I print on screen the id of the selected record, but I don't understand in which part of the code the id is assigned to the variable pk when i click on button.

I see that it is assigned like this

Code: Select all

var pk = $(this).attr('data-nu-primary-key');

but if I do that it doesn't work.

Code: Select all

function createViewButton(target, pk) {

var btn = $('<button type="submit" style="height:21px; border: none; vertical-align: top; background-color: #d54d49; transform: translateY(-10%); color:white" value="v">v</button>');
$(target).html(btn).attr('title',nuTranslate('Visualizza'));
btn.on('click',function(){
  var idCode = $(this).attr('data-nu-primary-key');
  nuMessage(idCode);
});

another question :
How do I pass the id to the new browse form to be able to use it in the where clause of the query of the new form?

one more question:
in the module properties in the list section I cannot use NULL twice it gives me an error ... (in case I want to add the delete function too)

[kev1n]

Hi,

Use this trick to add multiple blank columns:

2022-04-21_011239.png

I've improved the JS code for the form's Custom Code (Browse).

-> Insert the Browse form's id in the function openBrowseForm(). It can be retrieved through the Option Menu -> Form Info while that form is open.

Code: Select all

// No action when clicking a cell
function nuSelectBrowse(e) {
    return false;
}

function createButton(target, pk, label, title, openAction) {

    let btn = $('<button type="submit" style="height:21px; border: none; vertical-align: top; background-color: #378bd5; transform: translateY(-10%); color:white">'+ label +'</button>');

    $(target).html(btn).attr('title', nuTranslate(title));
    
    btn.on('click', function() {
        openAction(pk);
    });
}

function addButons(column, label, title, openAction) {

    $("[data-nu-column='" + column + "']").each(function(index) {
        var pk = $(this).attr('data-nu-primary-key');
        if (typeof pk !== "undefined") {
            createButton(this, pk, label, title, openAction);
        }
    })

}

function openEditForm(pk) {
    nuForm(nuGetProperty('form_id'), pk, '', '', '0');   
}

function openBrowseForm(pk) {
    nuForm('id here...', '', pk, '', '0');   // Filter the Browse form with the pk
}

// Add an edit and browse button
// Icon list: https://fontawesome.com/v5/search?m=free
addButons(0, '<i class="far fa-edit"></i>', 'Modifica', openEditForm);
addButons(1, '<i class="far fa-list-alt"></i>', 'Elenco', openBrowseForm);

It should look like:

buttons.png

[calida82]

I tried your code and it works great ... clicking on the buttons opens both the edit form and the browse form, but the browse form is not filtered. I would like to understand 2 things, how to use the filter, on the wiki it is written only the filter string, but it does not indicate how to set it, for example I have to select only the records in which the id of the selected record is present in the foreign key, but i don't know how to set the condition.
the two is that I would prefer if there is a chance to go through
the id selected in the first form to the second browse form via variable or some other way to then be able to use it in the where clause of the query and then also use it to add new records that must have the same foreign key that I will have to automatically insert to the new records added in this according to browse form

[calida82]

this can do my solution but i still have to try it

viewtopic.php?t=10645&hilit=nuform+filter&start=10

[kev1n]

The pk must be present in the browse columns (set it to width = 0) so that filtering works.

The filter cannot be set for one specific column only. nuBuilder appends a WHERE clause to the SQL like column_1 = filter_string or column_2 = filter_string etc. But that shouldn't really be a problem and should work well.

If you want to set a variable, you can use nuSetProperty() to set a Hash Cookie (HK)
Note that the 3rd parameter has to be set to true (global scope)

Code: Select all

function openBrowseForm(pk) {
    nuSetProperty('hk_pk');
    nuForm('id here...', '', pk, '', '0');   
}

Then, in the Browse SQL, use it like

Code: Select all

 ... WHERE your_column = '#hk_pk#'