AppGini Helper JavaScript Library

[jsetzer]

Hello everyone,

as some of you have requested and some of you already know, I have put together my "most wanted" JavaScript functions in a JavaScript library which can simply be included and used in your app. Many of these functions have been requested a couple of times here, directly by PM or by email. So I have decided to bundle useful functions.

For an experienced TypeScript / JavaScript developer this is definately not rocket science. But I'm convinced that this library may help at least the "normal AppGineers" having less skills in JavaScript and/or Bootstrap classes.

Here is a summarizing picture of a "modified" Online Clinic Management System (OCMS) from here: http://bigprof.com/appgini/applications ... ent-system

AppGiniHelperJavaScriptLibrary-201909.png (147.76 KiB) Viewed 18216 times

List of functions which are already available and documented.

• Two-Column-Layout for detail view pages
• Hide field /fields
• Hide labels
• Rename labels
• add Buttons below ActionButtons (links to other pages or buttons calling JavaScript functions)
• change icon and title of your app
• add dividers and headlines between fields
• more inside and more to come

Keep in mind that the library is still growing.

Everything you need to know (hopefully) can be read here:
https://www.bizzworxx.de/en/appgini-helper/


Developing all that stuff, testing, bundling, documenting, building and maintaining the homepage and shop-integration took a lot of time, as maintaining the lib will take more time in the future. I hope for your understanding that I can not publish the library for free because I have to live from my programming. You can buy the library at the fastspring.com platform which you might already know from your AppGini ordering process.

I hesitated for a long time whether to write this post or not, because in the end it is obviously advertising that does not really belong here. I hope you do not mind me.

Here are the most important links:

• https://www.bizzworxx.de/en/appgini-helper/
• https://www.bizzworxx.de/en/appgini-helper/install/
• https://www.bizzworxx.de/en/appgini-helper/get-started/
• https://www.bizzworxx.de/en/appgini-helper/cheatsheet/
• https://www.bizzworxx.de/en/appgini-helper/changelog/
• https://www.bizzworxx.de/en/appgini-helper/purchase/

There is a lot more on the roadmap and I'm happy to hear your wishes and requirements.

With kind regards,
Jan

[onoehring]

Hi Jan,

haven't even read the complete post, but want to say thank you already.
Thank you very much.

Olaf

[mekin]

Jan, thanks again for this beautifull library.

[jsetzer]

Thank you, @mekin and @onoehring, for your feedback, I am pleased!

Jan

[jsetzer]

Update 2019/09/11

Good morning,

next version of AppGini Helper JavaScript Library will contain couple of new features (see changelog) and one of them may be interesting for you if you'd like to provide more space for data and less for (action-) buttons in detail view. Here is a screenshot. Please have a look at the action buttons at the right hand side:

chrome_2019-09-11_04-24-06.png (104.92 KiB) Viewed 18146 times

This can be reached by changing the width of the action buttons container and by hiding button labels with a couple of lines of code provided by AppGini Helper JavaScript Library:

Code: Select all

// file: hooks/patients-dv.js
new AppGiniDetailView().ActionButtons()
    .width(1)
    .sizeButtons(Size.lg)
    .hideText();

Despite there is less information visible now, experienced users will know the buttons' functionality by color, icon and position. Anyway, your users will still see the buttons' text (in your language) as tooltip on mouseover and will get used to it after couple of usages.

chrome_2019-09-11_04-44-44.png (2.68 KiB) Viewed 18146 times

The new function have been documented at the bottom of the following page:
https://www.bizzworxx.de/en/appgini-hel ... n-buttons/

Hope you like it! Have a good day,
Jan

PS: Playing around with the new .addButton() function and the new .compact() function we can even toggle visibility of buttons' texts with only little code:

2019-09-11_05-32-51.gif (161.38 KiB) Viewed 18146 times

Code: Select all

var dv = new AppGiniDetailView();
var container = dv.ActionButtons();
var group = container.addGroup("Links");
// ...
group.addButton("Show", function () { dv.compact(); }, null, "minus");
group.addButton("Hide", function () { dv.compact(false); }, null, "plus");

[jsetzer]

Hello AppGineers,

next version of our AppGini Helper JavaScript Library will provide a couple of new features for input fields:

2019-09-15_19-05-27.png (4.51 KiB) Viewed 18055 times

2019-09-15_19-18-01.png (4.26 KiB) Viewed 18055 times

Stay tuned, will be released the next days.

Regards,
Jan

[Ionut Bocanet]

Also from my side a positive feedback.

I tried it and it works perfectly. Being a "normal appgini user" really helped me a lot with the database that i'm trying to build.

So Jan, keep doing what you do. It is good stuff.

[jsetzer]

Thank you for your positive feedback! I really appreciate that!

If you are interested, there are two more features coming soon and I have prepared a preview here:
https://www.bizzworxx.de/en/appgini-helper/preview/

• Grouping of fields in expandable/collapsible panels which save and restore their state automatically
• auto-refreshing indicators in the navigation bar to show any kind of counter

chrome_2019-09-25_00-33-49.png (132.26 KiB) Viewed 17845 times

I really hope some of you AppGineers like these upcoming features!
Best regards,
Jan

PS: There is a changelog listing all changes and new features:
https://www.bizzworxx.de/en/appgini-helper/changelog/

[mekin]

Like AppGini, the Helper Library is worth the money, I'm using it to finetune my webapplication.
It saved me a lot of time, especially if you are not a Java-coder and not scripting every day.

@Ahmed Genedy (AppGini) and @Jan Setzer (Helper Library), please keep up the great work, I'm waiting for the next updates!

[onoehring]

Hi Jan,

I am not sure - but can I place a button (an additional "save changes" button) next to a lookup field?

PS: Is this the right place to ask questions concerning usage?
PSPS: Also, where can I download updates?

Olaf

[onoehring]

Hi,

updates: using the fastspring checkout page, one can get a link to access his account. There you can see the download (and updates).

Olaf

[jsetzer]

Re: (1) Download updates

Hi Olaf, hi @all,

that's right, during the ordering process you will receive an email from the fastspring-shop. That mail should contain a valid download link for your initial download. The same download link is valid for download of updates - if you have subscribed for updates.

Kind regards,
Jan

[jsetzer]

Re: (2) Additional button next to a lookup field

Hi Olaf,

usually the selected value of the lookup (dropdown) will be saved when saving the whole record. Is there a reason why you need to save that one field apart from the record? Can you please explain the use case and the aim a bit more?!

What if the main-record has not been inserted, yet? In this case the lookup value cannot be attached to that (not-yet-existing) record.
And what if user saved the lookup-value but then decides to cancel editing that record? Undo of already saved lookup-value?

Looks quite difficult on the first glance.

I'm wondering if your requirement can be fulfilled in a simpler, more rubust and less confusing (for the users) way.

Anyway, you can create a button or any element next to any control or wherever you want using Javascript or jQuery by jQuery("<button/>"). After inserting the button you will need to listen to changes, then call a function which will find the id of the selected dropdown value, then submit the value to a serverside-PHP script using AJAX for example and save the value. But there are a few problems:

1. Detecting a change on the lookups is a more complicated than detecting changes of a common input field.
2. Getting the id of the selected lookup item is also a bit more complicated than just .val()
3. You will need some AJAX to pass data from client to server
4. You will need a PHP script on server side - well that's not too hard
5. You will have to care for situations as mentioned above when records have not been inserted, yet, for example, and then disable the AJAX-submit.
6. I'm afraid there will be more issues on the road...

Best regards,
Jan

(* Advertisement ) PS: There will be an onChange-event handler in one of the next two releases of AppGini Helper Library which will also work for lookups. Using this handler it will be easy to solve issues (1) and (2) from the list. That handler is in testing-status right now.

[onoehring]

Hi Jan,
thank you for your reply. Actually I (may) need something simpler I believe: Imagine an AppGini application. You see the details ... on a small screen (tablet). This makes the (large) "Save" button jump to the bottom of the page. This is the problem. I was asked to put a 2nd save button next to a field where most changes are done (2nd field form the top).
Why? a) Because people using the application have "large hands" and scrolling down on a tablet often produces tapping into some other (lookup) field. This disconcernes people. b) changing that item on top and scrolling down to the save button takes up valuable time.

So the button would simply submit the form. If it can not be submitted because of missing fields etc. no problem - the same reaction as with the "normal" save (changes) button should appear.

Was I able to clear things up a little?

Olaf

[jsetzer]

Hi Olaf,
as I can see now, I got your question wrong: You do not need an additionaly save-button next to the lookup for saving the selected lookup value, but you need an additional save button to save the whole record - a clone of the existing save-button - at a different place.

So please forget about my last post, it will not help you adding a cloned submit button.

Best,
Jan

[jsetzer]

Good morning everyone,

I hereby announce that a new version (2019/10/03) of our AppGini Helper JavaScript Library is available now.

Highlights

• Expandable/Collapsible Panels for your detail view forms, auto-saving state.
• Change title of detail view form (text and/or html)
• Replace home-icon by custom pictures in navigation bar
• Insert headlines, paragraphs or alerts above/below fields in detail view

Download
Customers with update-option can download the release from the download link you have received on purchase.

Links

• AppGini Helper JavaScript Library
• Changelog
• Plans / Pricing / Order

I really hope you like the new features.

Kind regards,
Jan

PS: Are you curious about what's coming up soon? Here is a preview

[onoehring]

Hi Jan,

amazing. Thank you so much.
Olaf

[mekin]

Hello Jan, thanks!
Waiting for the conditional function update

[Ionut Bocanet]

Jan,
Are amazing the new features, especially the EXPANDABLE/COLLAPSIBLE PANELS IN DETAIL VIEW.
I saw on your website that the explorer can store the state EXPANDED or COLLAPSED. When I open the Detail view, the panel to be collapsed.

Can you details how can I do this exactly, if possible.

[jsetzer]

Are amazing the new features, especially the EXPANDABLE/COLLAPSIBLE PANELS IN DETAIL VIEW.

Thank you very much!

Can you details how can I do this exactly, if possible.

There is a documentation of the .addGroup()-function here:
https://www.bizzworxx.de/en/appgini-hel ... tail-view/

You will need to include the AppGiniHelper library in header-extras.php and then use the following code in your TABLENAME-dv.js:

Code: Select all

// file: hooks/patients-dv.js
var dv = new AppGiniDetailView();
dv.addGroup("grp_history", "History", ["surgical_history", "obstetric_history"]);

On expand/collapse the state will be saved in the so called localstorage of the user's browser. You don't have to care for that. It will be stored/restored automatically.

Hope this helps,
Kind regards,
Jan

[Celson Aquino]

Hi, Jan

I am interested in your library and I would like to see some screens in mobile devices (both iOS and Android) since my AppGini generated apps are being used a lot in mobile devices.

Do you have some screens to show? Thanks in advance.

[jsetzer]

Hi,

sorry for the long delay. I am providing screenshots in different display sizes:


iPad (landscape):

chrome_iWA8BwnCLn.png (52.63 KiB) Viewed 17099 times

iPad (portrait):

chrome_lrlDMM3bad.png (101.33 KiB) Viewed 17099 times

iPhone X:

chrome_BjEVNWOTHu.png (18.45 KiB) Viewed 17099 times

Galaxy S5:

chrome_bb8knOH6fj.png (15.65 KiB) Viewed 17099 times

Note: These screenshots are just display-size simulations. AppGini generated apps are using bootstrap framework. Apps will look very similar in different browsers and OS's.

I know some developers have created beautiful forms using the helper library. Maybe some of you can post screenshots of your detail view forms from Android or iOS? Would be nice!

Best,
Jan

[Celson Aquino]

Thank you, Jan. That’s great, exactly as I was expecting!

[ronwill]

I've started using the AppGini Helper JavaScript Library and highly recommend it. It brings in a needed aesthetic quality to templateDV and the process, help info is clear and understandable even for non programmers like me! Well worth the small additional cost for the add-on and hope others will also support it's progress going forward.

Really glad you put it on the forum (otherwise i'd not have benefited from it). I would like to see a separate forum created for available improvements like this.

Keep up the great work Jan and please keep adding to it.... it would be nice to see it added under optional 'plugins' in the admin menu and integrated into AppGini!

Cheers, Ron

[jsetzer]

Hi AppGineers out there,
there are so many news today:


New Homepage

AppGini Helper Library has found a new home now:
https://appgini.bizzworxx.de/
Please update your bookmarks!


New Release

We have released new version today. See the release information here:
viewtopic.php?f=13&t=3329
...and the full changelog here:
https://appgini.bizzworxx.de/products/j ... changelog/

Highlights: Tabs, Tools and Panels


New Sub-Forum

There is a new sub-forum here, dedicated to AppGini Helper JavaScript Library
viewforum.php?f=13


Order process

From now on, AppGini Helper Library together with other plugins be purchased via BigProf's AppGini order page
https://bigprof.com/appgini/order
There are discounts if you purchase more than one product there:
https://bigprof.com/shop-discount-offers/

If you only need the Helper Library, you can purchase it separately here:
https://appgini.bizzworxx.de/products/j ... y/pricing/


Discounts
There are cyberweek-discounts for AppGini itself and for all plugins including the latest version of our AppGini Helper Library
https://appgini.bizzworxx.de/appgini/cyberweek-2019/
If you are interested, hurry up, because campaign will end on Friday, November 29th, 2019

Hope you like these news!
Have a great time,
Jan

PS: Please find Ahmed's announcement here:
viewtopic.php?f=13&t=3330