Page 1 of 1

Hide/Show columns with #toggle-columns-container

Posted: 2021-10-14 09:54
by ronwill
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 2116 times
Cheers, Ron

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

Posted: 2021-10-14 10:10
by jsetzer
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.

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

Posted: 2021-10-14 10:22
by jsetzer
I wanted to share a screenshot but wasn't able to edit the previous post. So here it is.

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

Posted: 2021-10-16 00:03
by sacgtdev
May be this is something you looking for

viewtopic.php?f=4&t=2870

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

Posted: 2021-10-16 12:21
by ronwill
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));
				
				}

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

Posted: 2021-10-16 12:26
by ronwill
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....