Modify default lookup buttons

[SkayyHH]

Hello,

I tried the "Modify default lookup buttons" function.

There is no change with this code (lookup field is Employee):

var field = new AppGiniField ("Employee");
var dropdown = field.dropdown ();
dropdown.fix ("pencil", "plus");
dropdown.getAddButton (). appendIcon ("user"). appendText ("New partner");
dropdown.getViewButton (). appendText ("Edit);

However, this works:

new AppGiniField ("Employee"). dropdown (). fix ("pencil", "plus");


What have I done wrong?

Thanks much, Kai

[jsetzer]

Any errors or warnings in console raised by AppGiniHelper? Any errors from other included libraries? Do you clear browser cache on every reload after js or css changes?

[SkayyHH]

no sorry. Tried all.

Kai

[jsetzer]

no sorry. Tried all.

No error in console? Are you sure?

var field = new AppGiniField ("Employee");
var dropdown = field.dropdown ();
dropdown.fix ("pencil", "plus");
dropdown.getAddButton (). appendIcon ("user"). appendText ("New partner");
dropdown.getViewButton (). appendText ("Edit);

If I paste the code into my code editor (VS CODE), it already shows the syntax error...

Code_KDInT3rdRn.png (14.44 KiB) Viewed 2147 times

...and obviously, after saving and reloading the page in the browser, javascript throws an error in console tab of dev tools, too:

Uncaught SyntaxError: Invalid or unexpected token


So, first things first:

(1) Change "add" button

If I take the first lines of your code for modifying the "add" button, it works like charm:

Code: Select all

var fieldname = "table1_id"; // I've just replaced your fieldname by mine
var field = new AppGiniField(fieldname);
var dropdown = field.dropdown();
dropdown.fix("pencil", "plus");
dropdown.getAddButton().appendIcon("user").appendText("New partner");

chrome_GhD6PVQZST.png (5.58 KiB) Viewed 2147 times

(2) Change the "view" button

After fixing the syntax error, also the last part of the js code works like charm:

Code: Select all

dropdown.getViewButton().appendText("Edit");

AppGini_M6lgVl7yGq.png (3.42 KiB) Viewed 2147 times

Recommendation

As mentioned in our troubleshooting guide (https://appgini.bizzworxx.de/support/troubleshooting/), I highly recommend using a modern code editor / integrated development environment (IDE) with intellisense and syntax highlighting (like VS CODE for example) which will already show up possible problems and syntax errors while typing (even before saving and reloading the browser).

Regards,
Jan

[jsetzer]

@all Please note

If - for any reasons - you disable the "view" button (in AppGini) OR if the currently logged in user does not have enough privileges, obviously, one or both buttons will not be available on the page and therefore will not be accessible by any javascript code.

AppGini_DJ0nL3Twpx.png (20.93 KiB) Viewed 2147 times

After disabling the link to the parent record, if I execute the following code in the browser...

Code: Select all

// ...
var fieldname = "table1_id";
var field = new AppGiniField(fieldname);
var dropdown = field.dropdown();
dropdown.getViewButton().appendText("Edit");

...there will be an error like this in console tab:
Uncaught TypeError: Cannot read property 'appendText' of null
This error says, you are trying to execute a function named appendText on an element which does not exist.


Recommendation

You should eliminate that source or errors by checking the existence of those buttons before applying any changes:

Code: Select all

// ...
var btnView = dropdown.getViewButton();
if (btnView !== null) btnView.appendText("Edit");

Regards,
Jan

[SkayyHH]

Hello,

it works. Thank you much.

And sorry. no idea why the quotes are missing. I had copied the code from your website and only changed the table name. Something must have happened by me ....

There is still a problem in combination with the "wraplabels function". The dropdowns are resizing delayed to the right.

Please, try something like this:

var field = new AppGiniField("Employee");
var dropdown = field.dropdown();
dropdown.fix("pencil", "plus");
dropdown.getAddButton().appendIcon("user").appendText(" New partner");
dropdown.getViewButton().appendText(" Edit");

new AppGiniLayout([12])
.add(1, ["#Patient", "Employee", "Description", "Prio", "Start", "Reviewdate", "End", "Bewertung", "Notes", "Follow_Up"])
.wrapLabels();
$j.ajax("ajax_check_login.php"); // does not help here.


Best regards, Kai

[jsetzer]

Yes, they do.

[jsetzer]

[...] The dropdowns are resizing delayed [...]

Hi,

let me try to explain the delay you have reported:

Due to lazy loading of certain elements, we have to wait for initial ajax calls to be finished completely before we can apply certain changes to the user interface. This especially relates to dynamic lookups which is one of the awesome features of AppGini.

As a result, this means:
The more initial ajax calls you have in your TV or DV, the longer it may take until they have been answered by the servers and processed by the client (javascript engine in your browser). Also, usually local ajax calls will be faster than calls to remote servers.

If, for example, there are several calculated fields in your TV or DV, obviously, there will be a couple of ajax calls after document.ready but before the page has been loaded completely.

All of this may lead to a "visible" delay in UI update, and, for example, lookups will always be rendered after n milliseconds but not in the beginning.

Please note that document.ready will be fired even before all ajax calls have been completed. This is by design. So never mix up document.ready ("html for page has been delivered to the browser") with "page has been loaded completely and all scripts have run". There are many posts here in the forum about exactly this standard javascript behaviour.

I know, this post here will not reduce your ajax loading times and therefore it will not improve the feeling of "delayed" UI changes. But I hope this post helps understanding the technical background of how client and server interact.

Regards,
Jan

PS: If someone is interested, just start the developer tools of your browser (usually F12) and open the network-tab. Reload your page (usually CTRL+R) and you will see how many different resources will be loaded and how many different dynamic ajax calls will be executed until, finally, the page has been rendered completely. That's all in the background.