AppGini Helper JavaScript Library

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

AppGini Helper JavaScript Library

Post by jsetzer » 2019-09-09 13:21

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
AppGiniHelperJavaScriptLibrary-201909.png (147.76 KiB) Viewed 16306 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: There is a lot more on the roadmap and I'm happy to hear your wishes and requirements.

With kind regards,
Jan
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
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: AppGini Helper JavaScript Library

Post by onoehring » 2019-09-10 08:00

Hi Jan,

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

Olaf

mekin
Veteran Member
Posts: 40
Joined: 2019-04-22 17:09

Re: AppGini Helper JavaScript Library

Post by mekin » 2019-09-10 11:40

Jan, thanks again for this beautifull library.

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

Re: AppGini Helper JavaScript Library

Post by jsetzer » 2019-09-11 02:38

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

Jan
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:

AppGini Helper JavaScript Library: More space for data

Post by jsetzer » 2019-09-11 03:34

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
chrome_2019-09-11_04-24-06.png (104.92 KiB) Viewed 16236 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
chrome_2019-09-11_04-44-44.png (2.68 KiB) Viewed 16236 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
2019-09-11_05-32-51.gif (161.38 KiB) Viewed 16236 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");
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: AppGini Helper JavaScript Library

Post by jsetzer » 2019-09-15 19:57

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
2019-09-15_19-05-27.png (4.51 KiB) Viewed 16145 times
2019-09-15_19-18-01.png
2019-09-15_19-18-01.png (4.26 KiB) Viewed 16145 times

Stay tuned, will be released the next days.

Regards,
Jan
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

Ionut Bocanet
Posts: 28
Joined: 2017-03-12 09:26
Contact:

Re: AppGini Helper JavaScript Library

Post by Ionut Bocanet » 2019-09-24 10:59

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.
Best Regards,
Ionut Bocanet

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

Re: AppGini Helper JavaScript Library

Post by jsetzer » 2019-09-24 22:35

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
chrome_2019-09-25_00-33-49.png (132.26 KiB) Viewed 15935 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/
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

mekin
Veteran Member
Posts: 40
Joined: 2019-04-22 17:09

Re: AppGini Helper JavaScript Library

Post by mekin » 2019-09-25 05:57

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!

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: AppGini Helper JavaScript Library

Post by onoehring » 2019-09-26 16:03

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

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: AppGini Helper JavaScript Library

Post by onoehring » 2019-09-26 17:23

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

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

Re: AppGini Helper JavaScript Library

Post by jsetzer » 2019-09-28 12:48

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
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: AppGini Helper JavaScript Library

Post by jsetzer » 2019-09-28 13:09

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.
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
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: AppGini Helper JavaScript Library

Post by onoehring » 2019-09-28 13:27

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

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

Re: AppGini Helper JavaScript Library

Post by jsetzer » 2019-09-29 06:59

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. :oops:

Best,
Jan
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:

NEW VERSION: AppGini Helper JavaScript Library (2019/10/03-01)

Post by jsetzer » 2019-10-03 10:30

Good morning everyone,

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

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

Links 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
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


mekin
Veteran Member
Posts: 40
Joined: 2019-04-22 17:09

Re: AppGini Helper JavaScript Library

Post by mekin » 2019-10-03 13:07

Hello Jan, thanks!
Waiting for the conditional function update ;)

Ionut Bocanet
Posts: 28
Joined: 2017-03-12 09:26
Contact:

Re: AppGini Helper JavaScript Library

Post by Ionut Bocanet » 2019-10-24 06:23

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.
Attachments
example.png
example.png (174.74 KiB) Viewed 15499 times
Best Regards,
Ionut Bocanet

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

Re: AppGini Helper JavaScript Library

Post by jsetzer » 2019-10-24 18:02

Ionut Bocanet wrote:
2019-10-24 06:23
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"]);

Image

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
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
Celson Aquino
Posts: 27
Joined: 2017-08-26 15:40
Location: Salvador, Bahia - Brazil

Re: AppGini Helper JavaScript Library

Post by Celson Aquino » 2019-11-06 12:12

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.

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

Re: AppGini Helper JavaScript Library

Post by jsetzer » 2019-11-11 22:35

Hi,

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


iPad (landscape):
chrome_iWA8BwnCLn.png
chrome_iWA8BwnCLn.png (52.63 KiB) Viewed 15189 times

iPad (portrait):
chrome_lrlDMM3bad.png
chrome_lrlDMM3bad.png (101.33 KiB) Viewed 15189 times

iPhone X:
chrome_BjEVNWOTHu.png
chrome_BjEVNWOTHu.png (18.45 KiB) Viewed 15189 times

Galaxy S5:
chrome_bb8knOH6fj.png
chrome_bb8knOH6fj.png (15.65 KiB) Viewed 15189 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
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
Celson Aquino
Posts: 27
Joined: 2017-08-26 15:40
Location: Salvador, Bahia - Brazil

Re: AppGini Helper JavaScript Library

Post by Celson Aquino » 2019-11-12 13:44

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

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: AppGini Helper JavaScript Library

Post by ronwill » 2019-11-16 10:56

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
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

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

Re: AppGini Helper JavaScript Library

Post by jsetzer » 2019-11-26 15:11

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
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

Post Reply