Simplifying Activity List Ordering Mechanism Topic is solved

[yvesf]

Hi,

I hope this email finds you well.

I’ve developed a mechanism to allow the sorting of a list of activities.
You can see an example of the current implementation below:

orderlistimplemented.gif

The goal of this mechanism is to enable the end user to reorder the list in their desired way. While this approach works, I believe it could be simplified.

Currently, I’ve implemented it this way because I haven’t found a method to select a row in a run::iframe. It would be much more user-friendly if we could implement the following workflow:

OrderListSimplification.gif

Do you have any suggestions on how to:

Select a row in an iframe.
Retrieve this row's data.
Use "Up" and "Down" buttons to reorder the list without needing to open each record individually?
Thank you in advance for your help!

Best regards,
Yves

[steven]

Hi Yves,

Why does the end user need to reorder the list?


Steven

[yvesf]

Hi Steven,

We need to reorder lists in several parts of the app. Practitioners should see the most relevant items at the top based on their specialization—like placing cornea treatments first for cornea specialists, or prioritizing fovea treatments for others. The same applies to payments, visit reasons, etc., with the most common options appearing first in long lists (sometimes 100+ items). I used 6 items in the demo for simplicity, but the real lists are much longer. Reordering is important for efficiency.

I hope this clears things up.

Best,
Yves

[kev1n]

Code to highlight a row:

Code: Select all

$(function () {
  const highlightableDivs = document.querySelectorAll('.nuCell');

  highlightableDivs.forEach((divElement) => {
    divElement.addEventListener('mousedown', () => {
      // Remove highlight from all divs
      highlightableDivs.forEach((div) => div.classList.remove('highlight'));

      // Get the data-nu-row attribute value of the clicked cell
      const rowValue = divElement.getAttribute('data-nu-row');

      // Get the primary key of the clicked cell
      const primaryKey = divElement.getAttribute('data-nu-primary-key');
      
      // Add highlight to all cells with the same data-nu-row value
      highlightableDivs.forEach((div) => {
        if (div.getAttribute('data-nu-row') === rowValue) {
          div.classList.add('highlight');
        }
      });
    });
  });

  $('.nuCell')
    .off('mouseenter', nuBrowseTableHoverIn)
    .off('mouseleave', nuBrowseTableHoverOut);

});

Add css in your form:

Code: Select all

.highlight {
  background-color: red;
}

or simply declare nuSelectBrowse() and handle the highlighting there.

[yvesf]

Hi Kev1n,

When I am trying to select a row, I see the red selection and immediately after, it opens the related record. If it is a browse form only, it open an empty edit form (no fields in it).
I need to select the row and retrieve the related activite_id and the act_order value. Those value will allow me to move the record accordingly.
Thx

Yves

[kev1n]

Set the form type either to Browse only or add an empty nuSelectBrowse function to the form's custom code to prevent the edit form from opening.

[yvesf]

Hi Kevin,


With your proposed approach, I cannot pass the primary key from the browse only form to the parent form from which I will send it to the proc.
How to pass this value ? Tried with a nuProperty to create hash cookie but it is only available in the current browse only form but unavailable on the parent form.
Here is the corresponding code :

Code: Select all

function nuSelectBrowse(event, element) {
    const primaryKey = $(element).attr('data-nu-primary-key');
    //nuSetProperty('primary_Key', primaryKey);
    // nuGetProperty('primary_Key');
   }

primaryKey contains the record_id which is exactly what we need. Tried without const in order to have a global variable in Javascript but certainly limited to the current form.
Any idea ? It is the most difficult part : how to pass value from one place to another.
Many thx for your continuous help,

Yves

[kev1n]

Code: Select all

parent.nuSetProperty('primary_Key', primaryKey);

[yvesf]

is there somewhere a ref to retrieve this syntax ? I will finish by learning but having a ref book will help. I have tried by putting the form id instead of parent and no effect.
thx again, Yves

[kev1n]

https://developer.mozilla.org/en-US/doc ... dow/parent