Select object on multiple columns Topic is solved

[yvesf]

Hi Steven,

Thanks for your input. I truly value the idea of learning how to fish rather than just being given a fish. For me, it's essential to understand the process and reasoning behind a solution so that I can tackle similar challenges on my own in the future. I always try to think through problems on my own before reaching out for help, and I find hints and guidance much more valuable than a complete, direct answer.

Regarding gentleSelect: In the header, there's a dedicated section that starts with </script> and ends with <script>, which I find confusing. How should I insert my script in this section? Will it go inside this area, and is there documentation explaining it? Should I place my <script> tag between the </script> and <script> tags? I'm finding it difficult to determine the correct syntax from the available documentation. Any guidance would be extremely helpful.
This insertion doesn't work and crash the system. It is the insertion in the header.

Code: Select all

// Functions placed here are available anywhere in nuBuilder Forte.


// Runs after each Edit Form loads
function nuLoadEditGlobal(formId, formCode) {

}

// Runs after each Browse Form loads
function nuLoadBrowseGlobal(formId, formCode) {

}

// Runs after each Edit and Browse Form loads
function nuOnLoad(formId, formCode) {

}

// Include external resources:

</script>
<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="gentleSelect/jquery-gentleSelect.js"></script>

<link type="text/css" href="gentleSelect/jquery-gentleSelect.css" rel="stylesheet" />


<script>

Many thanks for your continuous support, and I apologize if it ever seems like I'm just asking for a ready-made answer—that's not my intention..


Best,
Yves

[steven]

Hi Yves,

When nuBuilder is run, it places this header content inside a current <script> tag.

Code: Select all

</script>

<!--

<link rel="stylesheet" type="text/css" href="path_to_css.css"/>

<script type="text/javascript" src="path_to_js.js"></script>

-->

<script>

The reason the tag is ended at the start is to show how path_to_js.css and path_to_js.js

can be included (which cannot be done inside a <script> tag.)

So we close the tag and then open it up again after, so these files can be linked.

(if you uncommented them)

Steven

[yvesf]

Hi All,

Another alternative that is more a low code approach would be to transform my multi-column select object into a subform with selectable options. It will be more "nubuilder oriented" solution.

Yves

[kev1n]

I'd probably go for an embedded Browse form where each cell represents a selectable item.

[yvesf]

It is the best low code solution, thx Kev1n.

[yvesf]

I will publish once done for the community

Yves

[kev1n]

If you'd like to try out gentleSelect anyway, add it in Setup → Header and update the path accordingly.
In my case, it’s located in nuBuilder’s core folder under /libs/gentleSelect/.

Code: Select all

// Runs after each Edit Form loads
function nuLoadEditGlobal(formId, formCode) {
}

// Runs after each Browse Form loads
function nuLoadBrowseGlobal(formId, formCode) {
}

// Runs after each Edit and Browse Form loads
function nuOnLoad(formId, formCode) {
}
// Include external resources:

</script>
<link rel="stylesheet" type="text/css" href="libs/gentleSelect/jquery-gentleSelect.css"/>
<script type="text/javascript" src="libs/gentleSelect/jquery-gentleSelect.js?v=5"></script>
<script>

I recommend using my forked version, which includes improvements for absolute positioning and a more modernised approach:

GitHub - smalos/jquery-gentleSelect

In your form's custom code, initialise it as follows (replace "your_select_id" with the actual id of your <select> element):

Code: Select all

$('#your_select_id').gentleSelect({
        columns: 3,
        itemWidth: 200,
    });

You might need to tweak it slightly to fit your needs.

gentleSelect.gif

[yvesf]

hi Kev1n,
It was exactly what I was looking for — many thanks for this nice control!

Now, regarding multi-select, I tried applying gentleSelect on a <select> element with the multiple attribute. It almost works.

However, I’m running into a visual issue:
The multi-select dropdown appears on multiple tabs, always in the same position.
If I hide the original <select> element, then it behaves as expected except it shows on all tabs.

Here's what I observed:

Multi-select with gentleSelect activated on the intended tab:

Mutiselect on consultations tab.png

Multi-select with gentleSelect active but viewed from other tabs:

Mutiselect on others tabs.png

Multi-select with gentleSelect active and the original <select> hidden:

Mutiselect on others tabs when multiselect hidden.png

→ Perfect! Except it still appears across tabs.

Do you have any idea how to fix this behavior so it only appears on the correct tab?

Thanks again for your help!

Yves