AppGini Community Forums

Posted: **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

Posted: **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 (8.38 KiB) Viewed 2245 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 (8.6 KiB) Viewed 2245 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();
// ...

Posted: **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 (19.98 KiB) Viewed 2245 times

The DV-title will be updated on load. If you need a dynamic title, see next idea.

Posted: **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 (41.12 KiB) Viewed 2245 times

Posted: **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);
    });
}

Posted: **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!

Posted: **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.

Posted: **2022-11-24 14:56**

Thanks, Jan. I will take this into account

Regards,

AppGini Community Forums

Display one field in two different tabs

Display one field in two different tabs

Re: Display one field in two different tabs

Re: Display one field in two different tabs

Re: Display one field in two different tabs

Re: Display one field in two different tabs

Re: Display one field in two different tabs

Re: Display one field in two different tabs

Re: Display one field in two different tabs