Display one field in two different tabs

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
balfons
Veteran Member
Posts: 91
Joined: 2018-10-22 15:27

Display one field in two different tabs

Post by balfons » 2022-11-24 10:28

Hi!

I am working on a new peoject and I was wondering if I can display the same field (i.e. id_combined) in two different tabs. I have a lot of information so I decided to separate it in two tabs but I have a field (TITLE) which has a lot of information so I would display it in both tabs.

I tried to put it like this, but it didn't work. The filed id_combined was just displayed in the tab tab_dat

Code: Select all

var tab = dv.addTab("datos_generales", "Datos generales", "th-list" )
			.add(["id", "id_combined", "title", "area", "level", "status"])
			.add(line);

// Pestanya de dates
var tab_dat = dv.addTab("fechas", "Fechas significativas", "calendar" )
			.add(["id_combined", "date_issue", "date_validity", "date_enforcement", "date_repeal"]);
Then I tried to get the value of the field and display the field itself in one t ab and the value in the other one. It didn't work either:

Code: Select all

var fieldname = "id_combined";
var field = new AppGiniField(fieldname);
var currentvalue = field.getValue(true); //here I tried with true and with no value

// Organitzar camps ens pestanyes
var tab = dv.addTab("datos_generales", "Datos generales", "th-list" )
			.add(["id", "id_combined", "title", "area", "level", "status"])
			.add(line);

// Pestanya de dates
var tab_dat = dv.addTab("fechas", "Fechas significativas", "calendar" )
//			.add(currentvalue )
			.add(["date_issue", "date_validity", "date_enforcement", "date_repeal"]);
Can anybody help me, please?

Thanks in advance

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Display one field in two different tabs

Post by jsetzer » 2022-11-24 12:21

Interesting. There are several ideas in my mind:

Idea no. 1
Instead of moving the (=one) field into one tab, just don't move the field (which keeps it as a "remaining field" outside the custom tabs) and then place the tabs below the remaining fields.

See the first field "Aktenzeichen" which remains above the custom tabs. The field will be always visible, tab-independently.

chrome_3c4y4UgrBX.png
chrome_3c4y4UgrBX.png (8.38 KiB) Viewed 900 times

Move Custom Tabs below the remaining fields:#

Code: Select all

dv.getTabs().setPosition(TabPosition.Bottom);


Extra Tipp
If you don't like the left-right layout of that field, you can line-wrap it:
chrome_Lu9nL8l1ds.png
chrome_Lu9nL8l1ds.png (8.6 KiB) Viewed 900 times

Code: Select all

dv.getField("reference").wrap();

---

Code in hooks/TABLENAME-dv.js

Code: Select all

// ...
var tabItem = dv.addTab("tabItem", "Akte", "folder-open", ["type_id", "location_id", "node_id", "employee_id"]);
var tabDelivery = dv.addTab("tabDelivery", "Versand", "send", ["target_id", "sent_on", "sent_by", "sent_ip"]);
var tabMore = dv.addTab("tabMore", "Weitere Angaben", "info-sign", ["description"]);
var tabMeta = dv.addTab("tabMeta", "Meta", null, ["id", "created_on", "created_by", "modified_on", "modified_by"]);

dv.getTabs().setPosition(TabPosition.Bottom);

dv.getField("reference").wrap();
if (AppGini.mobileDevice()) tabMeta.hide();
// ...
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Display one field in two different tabs

Post by jsetzer » 2022-11-24 12:27

Idea no. 2
Change the dv-title

Code: Select all

dv.setTitle("Akte: " + dv.getField("reference").getValue());
chrome_6pRgoma3Os.png
chrome_6pRgoma3Os.png (19.98 KiB) Viewed 900 times

The DV-title will be updated on load. If you need a dynamic title, see next idea.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Display one field in two different tabs

Post by jsetzer » 2022-11-24 12:29

Idea no. 3
Change DV title and update on change

Code: Select all


// function for updating the DV-title
function updateTitle() {
    dv.setTitle("Akte: " + dv.getField("reference").getValue());
}

// initially update title (on load)
updateTitle();

// update title on change
dv.getField("reference").onChange(function() {
    updateTitle();
});
chrome_h4aqX032XM.gif
chrome_h4aqX032XM.gif (41.12 KiB) Viewed 900 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Display one field in two different tabs

Post by jsetzer » 2022-11-24 12:54

Idea no. 4
This is more complicated but should be close to what you have requested:

In this example, once again, I'm using reference field. I'm "cloning" it, then placing the clone above created_on field, which is in last tab "Meta":

Code: Select all

insertClone("reference", "created_on");

function insertClone(fieldname, beforeFieldname) {
    var field = dv.getField(fieldname);
    var field_label = field.getMeta().getLabel().html();
    var custom_field = jQuery(`<div class="form-group"><label class="col-md-3 control-label">${field_label}</label><div class="col-md-9 form-control-static" id="${fieldname}_clone">${field.getValue()}</div></div>`);
    dv.getField(beforeFieldname).insertAbove().element(custom_field);
    field.onChange(function(data) {
        jQuery(`#${fieldname}_clone`).text(data);
    });
}
Attachments
chrome_w9TbZ6tKYw.gif
chrome_w9TbZ6tKYw.gif (57.79 KiB) Viewed 899 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

balfons
Veteran Member
Posts: 91
Joined: 2018-10-22 15:27

Re: Display one field in two different tabs

Post by balfons » 2022-11-24 13:04

Hi Jan!

thanks for your help! All options are very interesting. As for our project, what suits best is the second one. Just one point, when having a drop/down or a calculated field (like ours) you have to add true inside the brackets, like this:

Code: Select all

v.setTitle("Title: " + dv.getField("reference").getValue(true));
Otherwise, value is null. We used getValue in an other file of the project and found this out.

Thanks again!

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Display one field in two different tabs

Post by jsetzer » 2022-11-24 13:28

You are right, getValue-function on lookups behaves differently from getValue-function on other field types:

getValue() on lookups
For lookups, dv.getField("fieldname").getValue() returns an object containing id and text, if available, or null.

onChange handler for lookups
The same for dv.getField("...").onChange(function(value){}) handler, which receives null or an object containing id and text.

getValue(true) on lookups
When passing parameter true to dv.getField("lookup_fieldname").getValue(true) the function will not return an object (having id and text) but just the plain text. In many cases, like in this one, this may be enough.


Attention
Due to lazy loading, getValue() on special field types (like lookups) may not be available on page load. I always recommend dumping variable contents into console, using console.log("..."), for debugging purposes.

Caution
Lookups behave different in comparison to "normal" input fields. Therefore, when applying those function to lookup fields, always test .getValue()-function and .onChange()-handler carefully with different scenarios before using in production. I cannot guarantee 100% accurance in every case and scenario. That's the reason why getValue and especially onChange are marked as Beta. Please always use them with special attention while testing.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

balfons
Veteran Member
Posts: 91
Joined: 2018-10-22 15:27

Re: Display one field in two different tabs

Post by balfons » 2022-11-24 14:56

Thanks, Jan. I will take this into account

Regards,

Post Reply