disconnected PhoneGap app with multiple UX components?

[christappan]

I'm trying to build a disconnected PhoneGap app for the first time (in a while, anyway).

I'm able to create and install a basic app successfully, but I'm a bit confused because only the "Initial UX component" specified in the PhoneGap Build Project Settings appears to be available unless I'm online. I've tried including the other UX components as "Additional Files Required", and I've tried embedding a second UX within the first.

When building a PhoneGap app, does everything accessible offline have to be built within a single UX component? Or am I missing something...?

Thanks

[Davidk]

Re: disconnected PhoneGap app with multiple UX components?

You've not included an Alpha build #. It's not clear what your intention is. How are you calling additional UX components?
Including UX components as "Additional Files Required" doesn't really make sense because how would you call them?
Embedding a UX makes more sense but you need to read the properties available for an Embedded Object. You have "Method for opening UX in a PhoneGap...". By default you get AjaxCallback which won't work for you because you're offline. You can choose Precomputed but then you must be aware that your UX and all it's data is... precomputed... which may be fine, but that's something that most are not aware of. Or you can choose a combo of callback and precomputed.

If you're also sending data with your app, then precomputed is the option you want.

Since you're building a disconnected app, your data must come from somewhere... e.g. SQLite, DataCache.

[christappan]

Re: disconnected PhoneGap app with multiple UX components?

Thanks, David. I'm using the build from around February this year, but I don't have the number in front of me.

My biggest challenge is understanding how to avoid building huge ux components but still being able to do multiple tasks based off of the same offline data. Related to that, ideally I could reuse some of those ux components in a web application as well, but when they are really large they are hard to work with as an end user.

I started another small app yesterday and simply went with lists with data persisted to the file system based on a number of threads I read here on the forum and studying the different options for data cache, file system, and SQLite. I feel really competent in building the small apps, but I've got another ux that continued to grow in size and is now difficult to develop and test and poor in performance both when loading the component in a web application and just in interacting with it using JavaScript. So I'm trying to understand how far I can go with a single ux without compromising performance. I thought that breaking it into separate ux components might offer some flexibility here, but it doesn't sound like that is a possibility.

Sorrythe first post wasn't very clear about my ambitions. Thanks for responding regardless.

[Davidk]

Re: disconnected PhoneGap app with multiple UX components?

It offers flexibility in terms of dealing with smaller UX components while in development... but you have the same issues when running your app.

The only way to work with multiple UX components disconnected is with pre-computed. This means the main ux and any embedded ux is rendered into the index.html file. I wouldn't be surprised to find that your index.html file is now larger than if you'd just worked with one larger ux.

Size is relative... how large is your UX?

When all done, you're still loading everything you want to do into the DOM. The only run-time benefit an embedded UX gives you is that your main UX loads faster. Your embedded UX can load when it's called for. However, disconnected cannot follow that process... you must render everything since you have no way of going to get anything else.

Alpha does have a solution, although I don't think they've thought about it. Their Instant Update process is actually the answer to large UX / embedded issues... and you touched upon it in your first post. UX components could be compressed and sent along with the app as additional files... the way Instant Update handles stuff. When an embedded UX is called, it is called from the file system, unzipped, and rendered. Managing components this way means you could actually add and delete rendered embedded components. This would keep the DOM small and your app fast.

[christappan]

Re: disconnected PhoneGap app with multiple UX components?

I'm dealing with an app that has different sections depending on the client type being served and it's used at different points through an application process. So there are entire sections that a given user might not use--ever--but certainly not during every use. So calling UXs as needed from the file system would definitely speed it up.

Or I could break it into three or four separate apps and just maintain the same core structure, but then I'm maintaining three or four separate apps.

Still, while you're offering some solid insights, I think you're confirming that I have more thinking to do and there's not an easy answer I like ...

Thanks again.

[Davidk]

Re: disconnected PhoneGap app with multiple UX components?

Essentially, you just need to try it, in a mobile app... and not base a decision on how it behaves as a web app. This is a mobile app... you must tailor it to mobile use. You control who sees what in your app. If you had just one UX, how many PanelCards are needed to serve all the different client types?

[WebDesignShop]

Re: disconnected PhoneGap app with multiple UX components?

The first thing is to follow David's advice on starting with a mobile app first approach. Develop a component, publish it, test on a mobile device. Take something simple, and make sure you get the disconnected process to work - from the ground up. Make sure the basics work before developing something complex. If you are after a dynamic forms component (where you can have unlimited forms/fields/etc - and it won't cripple your device) let me know - we can help.

[christappan]

Re: disconnected PhoneGap app with multiple UX components?

Thanks so much for your help, everyone.

Replying mostly to David, one app I'm working on was very much intended for web until it was requested to take elements of it offline, so I built it from the wrong direction and now I'm re-working/thinking it. But it's substantial enough in size and complexity that I don't really want to have two separate sets of UX components for web and for mobile.

Replying mostly to Sean, I don't have a specific use case (yet) for what you're talking about, but I'm quite curious the method you're using for the dynamic forms. I know conceptually how it would be done but haven't worked through it all in my head.

I have made progress on my initial questions myself as well, though, and though I'm not fully there, I thought I'd share.

My challenges are (at least) two-fold:
1) I want to have an app that doesn't necessary have to load and handle all controls every time it's opened. I want it to open lightweight as a list, and as the user needs to use access functionality, they can open those various sub-components. This is about performance, but as noted before, there are certain sets of controls that are literally never accessed by some users.
2) I want to have an app that works offline on a simple mobile list that has data assigned to the logged-in user. But I want a web app for managers that has access to a lot more records without having to pull all that data into a localStorage persisted data list. And I want the controls--the fields, layout, validation rules, etc--to be the same in the mobile app and the web app. This is both for consistency from a user perspective as well as my desire not to build and maintain almost-duplicate versions of UX components.

Trying to have some of this work offline, I ended up with a single, huge UX component that is slow to open online and slow to use. And it actually isn't working as a PhoneGap app at all at the moment.

So to the solutions. First, maybe this is what David referenced before and I just misunderstood. I had seen the "precomputed" option in UX properties, but I had not seen the option to open a second UX as precomputed (link). This is significant in addressing both my concerns above, because it means that even though there's still just one index.html file in the PhoneGap app, it's possible to call other UX components. It means that I can load a list and open various sets of controls ("sets" in different UX components) as applicable to a user, but it also means that I could open a UX with the controls from a different web-only list as well.

To do this, I have to replace some of the list-detail view functionality, but that's essentially just 1) getting data from the list to the controls when a list row is selected, 2) checking for validation errors before updating a list, and 3) getting data from the controls to a list when data is submitted by a user. The code to do that (there may be better ways) is below. Note that in the function call, the listDlgObj and controlsDlgObj are both able to be set. So if I have a list used only online by managers or a list component used only offline by front-line staff, I can call data into the same sub-component UX with the controls, validations, etc. I can also call data from a list into controls in multiple sub-components and save data from those controls back to a list, which means not everything has to be opened all at once.

So rather than feeling the need to pull all controls in a single UX with my offline list, I'm now able to make it perform more dynamically for an end user and more modular for development without having to maintain similar components.

Offline mobile:
Primary UX component: as few as two controls: 1) list control with persisted data limited to logged in frontline staff user. 2) the UX control for the primary key. This allows us to still configure the list as having a detail view
Secondary, Tertiary... UX components: Opened from the primary UX as precomputed, and the controls in these UX components are effectively connected to the list in the Primary UX component for viewing and editing data. Any of these UX components can be the same or different UX components as those used in the online web version.

Online web:
Primary UX component: as few as two controls: 1) list control with management access to many more records than offline, but pulling data only online. 2) the UX control for the primary key. This allows us to still configure the list as having a detail view
Secondary, Tertiary... UX components: Opened from the primary UX as precomputed, and the controls in these UX components are effectively connected to the list in the Primary UX component for viewing and editing data. Any of these UX components can be the same or different UX components as those used in the offline mobile version.

Side notes:
a) I find that my lists are re-rendering unnecessarily at times, when I navigate between panels, etc. I'm hopeful that as a side benefit, the lists won't re-render if I'm shifting panels in a separate UX. Yet to be determined, though.
b) I don't even have an Alpha build yet with editable list components, but at least in my initial observations, it seems like you have an editable list or a traditional detail view. I think this code would allow you to have both in the same list so that some things could be quickly updated directly in the list but more detailed info would be opened and edited in a traditional detail view.

// **THE LIST SHOULD BE SET AS HAVING A DETAIL VIEW, AND FIELDS CAN BE MAPPED AS APPLICABLE AS LONG AS AT LEAST THE PRIMARY KEY CONTROL IS ON THE SAME COMPONENT AS THE LIST. 
// BUT ADDITIONAL FIELDS FROM OTHER UX COMPONENTS CAN BE POPULATED FROM AND UPDATE A LIST IN A SEPARATE UX COMPONENT ON THE SAME PAGE

// **NOTE THAT FOR BOTH OF THESE FUNCTIONS, THE ASSUMPTION IS THAT THE LIST FIELD NAME MATCHES THE CONTROL NAME, BUT REMAPPING IS POSSIBLE.
// HOWEVER, THE {dialog.object}.currentValues[0] METHOD RETURNS CONTROL NAMES IN UPPERCASE, SO LIST FIELDS SHOULD BE UPPERCASE AS WELL. (i.e. "SELECT CUSTOMERID, ORDERID..." instead of "SELECT customerId, orderId..."

function populateDialogControlsFromList(listDlgObj, list, controlsDlgObj = listDlgObj) {
// this would typically be called by the onSelect event in the list component
//	debugger;
	eval('var lObj = ' + listDlgObj + '.getControl(\'' + list + '\');');

	var selectedRow = lObj.selection[0]; // may be better practice to use list row primary key to find row index that should be updated?
	
	// create a mapping of list field names to control names. 
	var _d = {};
	var fieldCount = lObj._listFields.length;
	var fieldName = '';
	
	// this loop assumes that the name of the list control column matches the name of the UX control and that every UX control with a name matching the list column should be populated
	for(i = 0; i < fieldCount; i++) {
		fieldName = lObj._listFields[i].name;
		eval('_d[\'' + fieldName + '\'] = lObj._data[selectedRow].' + fieldName);
	}
	//optional: re-mapping, removing mapping, or additional mapping can be done here similar to this: 	
	//_d['CUSTOMER'] = lObj._data[selectedRow].CUSTOMER;
	//_d['CUSTOMERID'] = _d['CUSTOMER']; delete _d['CUSTOMER'];
	
	eval(controlsDlgObj + '.prepare()'); // don't actually know what this does or if it's necessary here. It was included in the Server-side onDialogInitialize event prototype comments
	eval(controlsDlgObj + '.populate(_d)');

	//{dialog.object}.refreshClientSideComputations();
}



function updateListFromDialogControls(listDlgObj, list, controlsDlgObj = listDlgObj) {
// this would typically be called by a "save" or "Submit"' button.
//	debugger;
	//check for validation errors
	var arr = document.getElementsByClassName('errorText');  // find all HTML tags with the class "errorText" because this is the javascript validation error tag class
	var arrLength = arr.length;
	if(arrLength != 0) {  // there is/was at least one validation error
		var ele = '';
		var id = '';
		var display = '';
		for(i = 0; arrLength; i++) {
			ele = arr[i]; // get the first element with 
			id = ele.id;
			display = document.getElementById(id).style.display;
			if(display == '') { // corrected validation errors are on the page but have a display of 'none'
				ele.scrollIntoView();  // scroll into view the control with the validation error
				alert('Please correct validation errors.');				
				return false; // stop iterating through for loop and bypass action section below
			}
		}
	}
	
	// no validation errors, so ready to populate the list
	var _d = {};
	eval('_d = ' + controlsDlgObj + '.currentValues[0]'); // this returns all dialog controls and their values. Non-mapped controls will be ignored but do not cuase errors. 
	eval('delete _d[\'' + list + '\']');  // maybe okay without this line, but ideally not setting the selected value of the list while updating the list	
	//optional: alter values between control and list or change default mapping
	//_d['CUSTOMER'] = 'my own value';
	//_d['CUSTOMERID'] = _d['CUSTOMER']; delete _d['CUSTOMER'];
	
	eval('var lObj = ' + listDlgObj + '.getControl(\'' + list + '\')');
	var selectedRow = lObj.selection[0]; // may be better practice to use list row primary key to find row index that should be updated?
	if(!selectedRow) { // if no list row is currently selected, we're going to add a row
		//optional: add default values
		//_d['CUSTOMER'] = 'my default value';
		lObj.appendRows(_d);		
	} else { // if there is a selected row, we're going to update it
		lObj.updateTableRow(selectedRow,_d); // 
	}

	//{dialog.object}.refreshClientSideComputations();
}

I know there's a lot here that may or may not be clear and may or may not be beneficial to anyone, but I'm still eager to get feedback on this from anyone who has additional advice.

[peteconway]

Re: disconnected PhoneGap app with multiple UX components?

You would be much better off just giving an overview of what you want to achieve ( what's the scenario) and what's the nature and reason of the data being persisted etc. it may be the approach is the issue not the applications resources.- Happy to help if you want to how me, send a PM.

Out of interest, what do you call large when it comes to the UX?

[WebDesignShop]

Re: disconnected PhoneGap app with multiple UX components?

Ultimately, Pete is correct. You need some consultation with someone who has a good bit of experience building disconnected applications (Alpha, David, Pete, myself - someone). I don't think you'll get the answers you need using the forum because there are just too many variables at play. A few hours of paid consultation may go a long way in helping you.

[christappan]

Re: disconnected PhoneGap app with multiple UX components?

I've got a UX that we're using from a web application, but I've built it toward taking it offline. Lists are persisted, validation is all client-side, filters are all client-side, etc. The purpose is to capture loan application data. There are buttons available only online that open grids for seeing customer loan history, checking off an approval process, etc. There's not much that you can do in the UX that wouldn't need to be offline at some point.

The application core fields are used for all applications--client or group ID, loan amount, disbursement dates, loan terms etc. There are about 30 editable fields that are used in almost all applications created, and about 11 that are joins used primarily for displaying important data in the list view itself.
- There are about 60 editable fields used only if the application is for individuals
- There are about 25 editable fields used only for group loans
- There are about 20 editable fields used only for agricultural loans.

I've made the UI intuitive so that the right fields show up for the right kind of loan. That's not the challenge.

Now, the number of fields has grown dramatically during the development, so I might have built it differently from the start if I'd understood the scope. But all 135 or so editable fields are stored in the same table in the database (many columns of which are null since they're only used for certain loan types). For offline purposes, a loan officer will only have her/his customer's loan requests, and the performance on this is reasonable though still a bit slow. For managers reviewing and approving the loan (which will remain online indefinitely), I've tried to limit the data they see to a minimum that is valuable, but for upper management it's going to be some 4,000 to 5,000 in a given month. Once loans are disbursed they're removed from the default data load.

There are also supplemental and child lists. For group loans, there's a list of each group member and their loan amount, etc. There are also a few lookup lists, some static and some that pull customer info based on the user logged in. These lookup lists have no detail views and none of the lists are pulling data that isn't used somehow.

Performance is reasonable once the UX loads, though Alpha kills me redrawing at unnecessary times like every time a record is saved, iterating through those 4-5K records. But the load of the UX is minimum 30 seconds. If I watch activity in the Network tab of Chrome Developer Tools and I watch Task Manager on the server, there's a CPU spike when the UX is first called, then a long pause of any CPU use (by any applications, not just Alpha), then a spike and then Chrome finishes its Time To First Byte and downloads the page pretty quickly. Then the code runs to refresh the lists themselves.

Size of the UX is 8MB as a development file, about 3.5 on the server, but after compressed by IIS the download is under 500KB. I thought maybe the CPU pause was IIS compression, but I turned it off and performance for time to first byte was the same (though the downloaded size was larger).

I may ask someone at Alpha about the CPU behavior unless one of you has a solid insight on what's happening there. But ideally I'd have a way to just pull the list data related to the types of loans being used. And/or I'd be able to use the same UX for the controls in editing, but be able to use a persisted list for users with limited records and an online-only list for managers.

Perhaps it's better to dig in deeper with someone, which I may do, but any conceptual guidance is appreciated.

[peteconway]

Re: disconnected PhoneGap app with multiple UX components?

There are also supplemental and child lists. For group loans, there's a list of each group member and their loan amount, etc. There are also a few lookup lists, some static and some that pull customer info based on the user logged in. These lookup lists have no detail views and none of the lists are pulling data that isn't used somehow.

How many of these Lists are there? Also 8Mb is a big deal in design, what else is in there frames etc..

[peteconway]

Re: disconnected PhoneGap app with multiple UX components?

But all 135 or so editable fields are stored in the same table in the database (many columns of which are null since they're only used for certain loan types).

Considering there are detailed views used here so possibly 135 or so data controls and their properties, why doesn't each loan TYPE have it's own database?

[Davidk]

Re: disconnected PhoneGap app with multiple UX components?

Considering there are detailed views used here so possibly 135 or so data controls and their properties, why doesn't each loan TYPE have it's own database?

Because that's an exceedingly bad design... and unnecessary. It's not SQL that's a problem.

[Davidk]

Re: disconnected PhoneGap app with multiple UX components?

Chris, I would probably opt for a SQLite solution and unbound Lists. This would be a "roll your own" process... getting away from the bloated, slow code that Alpha has created and only tested with several hundred records... not several thousand. This is a very old concern with Alpha.

Create SQLite databases, maybe use ViewBox Controls because they are much lighter than List Controls (although the ViewBox is horrendous to deal with).

However, you're so deep into the woods now you probably won't see your way clear to ditch what you have and create something else.

If this is a banking app then I'd suggest you have money to spend. Spend it creating a native app using Swift or Flutter and use Alpha for back-end admin stuff.