Hide/Show columns with #toggle-columns-container

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
User avatar
ronwill
Veteran Member
Posts: 198
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Hide/Show columns with #toggle-columns-container

Post by ronwill » 2021-10-14 09:54

Does anyone know how to have an admin pre-selection of what the initial view columns should be on first loading (i.e. before viewer can select/choose their own selections to view, save for next visit etc.). At present all columns load as default.
My Idea, wish, is to be able to pre-define the default for a limited number of key columns to show for more focus etc. to first time visitors etc. (Yet still allow for the user to select their own choice once they know how to do that!)
toggle.jpg
toggle.jpg (53.44 KiB) Viewed 112 times
Cheers, Ron
Ron - Gloucestershire, UK: AppGini Pro V 5.95 Rev 1136 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar
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: 1164
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Hide/Show columns with #toggle-columns-container

Post by jsetzer » 2021-10-14 10:10

Check localstorage in your Browser. You should be able to write default values per table for example when user enters site and no TV column settings have been stored, yet.

There are entries name like this: columns-TABLENAME_view.

Those entries (JSON-encoded string) contain all field names as property named like this: TABLENAME-FIELDNAME. Each property is a boolean value which indicates visibility ob the column.

Code: Select all

{"orders-customer_id":true,"orders-customer_email":true,"orders-number":true,"orders-purchased_on":true,"orders-product_id":true,"orders-product_name":true,"orders-expires_on":true,"orders-subtotal":true,"orders-currency":true,"orders-is_cancelled":true,"orders-is_expired":true,"orders-customer_orders_count":true,"orders-subtotal_eur":true,"text-nowrap":true}
You should be able to create a custom object and write the JSON-encoded string representation to localstorage of the user's browser using JQuery.
Kind regards,
<js />

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

Re: Hide/Show columns with #toggle-columns-container

Post by jsetzer » 2021-10-14 10:22

I wanted to share a screenshot but wasn't able to edit the previous post. So here it is.
Attachments
chrome_ikr8NYye3l.png
chrome_ikr8NYye3l.png (46.16 KiB) Viewed 105 times
Kind regards,
<js />

sacgtdev
Veteran Member
Posts: 54
Joined: 2020-06-10 11:14

Re: Hide/Show columns with #toggle-columns-container

Post by sacgtdev » 2021-10-16 00:03

May be this is something you looking for

viewtopic.php?f=4&t=2870

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

Re: Hide/Show columns with #toggle-columns-container

Post by ronwill » 2021-10-16 12:21

Thank you both for the help provided.
I am currently trying the suggestion out. I did find a solution by amending my datalist.php file that seemingly works out fine, but requires me to either set datalist.php to read only or re-set each generation of app (not an issue for me as I have a few other mods in the file anyway).

My temp solution:

File: datalist.php

End of file find this code:

Code: Select all

		<script>
			$j(function(){
				/**
				 *  @brief Saves/retrieves value of column toggle status
				 *  
				 *  @param [in] col_class class of column concerned
				 *  @param [in] val boolean, optional value to save.
				 *  @return column toggle status if no value is passed
				 */
				var col_cookie = function(col_class, val){
					if(col_class === undefined) return true;
					if(val !== undefined && val !== true && val !== false) val = true;

					var cn = 'columns-' + location.pathname.split(/\//).pop().split(/\./).shift(); // cookie name
					var c = JSON.parse(localStorage.getItem(cn)) || {};

					/* if no cookie, create it and set it to val (or true if no val) */
					if(c[col_class] === undefined) {
						if(val === undefined) val = true;

						c[col_class] = val;
						localStorage.setItem(cn, JSON.stringify(c));
						return val;
					}

					/* if cookie found and val provided, set cookie to new val */
					if(val !== undefined){
						c[col_class] = val;
						localStorage.setItem(cn, JSON.stringify(c));
						return val;
					}

					/* if cookie found and no val, return cookie val */
					return c[col_class];
				}

				/**
				 *  @brief shows/hides column given its class, and saves this into localStorage
				 *  
				 *  @param [in] col_class class of column to show/hide
				 *  @param [in] show boolean, optional. Set to false to hide. Default is true (to show).
				 */
				var show_column = function(col_class, show){
					if(col_class == undefined) return;
					if(show == undefined) show = true;

					if(show === false) $j('.' + col_class).hide();
					else $j('.' + col_class).show();

					AppGini.TVScroll().reset();

					col_cookie(col_class, show);
				}
Modify section: /* if no cookie, create it and set it to val (or true if no val) */
with....

Code: Select all

					/* if no cookie, create it and set it to val (or true if no val) */
				if (localStorage.getItem("invoices-confirmed") === null){
				
					const field = {"invoices-confirmed": true, "invoices-id": true, "invoices-lock_confirm": true, "invoices-order_type": true, "invoices-code": false, "invoices-status": true, "invoices-date_due": false, "invoices-client": true, "invoices-total": true, "invoices-created": false, "invoices-documents": true, "invoices-zerofix": true, "invoices-zerofix_1": true, "invoices-updated": true, "invoices-paypal": true}
/* CHANGE ABOVE TO SUIT YOUR TABLE COLUMNS WITH DESIRED TRUE OR FALSE
					window.localStorage.setItem("columns-invoices_view", JSON.stringify(field));
				
				}
Ron - Gloucestershire, UK: AppGini Pro V 5.95 Rev 1136 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

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

Re: Hide/Show columns with #toggle-columns-container

Post by ronwill » 2021-10-16 12:26

Just a note, I don't think you can add more than the one table (I tried but failed!), but the mod does not seem to affect my other tables operating as normal. I will come back if problems encountered....
Ron - Gloucestershire, UK: AppGini Pro V 5.95 Rev 1136 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

Post Reply