Forms in disconnected/PWA app not working

[jking]

     Over the last week I have been experimenting with a very small disconnected/PWA app.  It has two files, CoinCollector.tps and ThisDevice.tps.  I have set all the items as suggested in the NT 11.04 docs (I hope!).  I have made a few mistakes and these have been corrected.
     I have been in email contact with Bruce and sent a copy of my app and dct files to him.  While waiting for Bruce, I thought I would ask here to see if anyone else has the same experience.  Basically I can call the app browse, and insert records...the form appears as expected for data entry.  If I close the app, go back in, select an item in the browse and click on the in-line change button, the form opens completely blank.  A message appears in the DevMode console, see the attached image, Form.png.
     This is an app created with the NT 11.04 wizards on Clarion 11.0.13244.  I have attached a zip of the app and dct files, should anyone wish to test this app on their systems.  If anyone has a few minutes, please test and see if this can be duplicated on your system.  It might be helpful in narrowing down my problem.

Thanks,

Jeff King

[DonRidley]

You caught my attention when you said that you click an inline change button.

If you don't already, put a normal change button over or under the browse just like the insert button.

Let me know if that helps.

[jking]

Don,

     Thanks for the response.  Unfortunately, adding the change button results in the same effect.  See the attached image.  One thing to add is that I used mBuild to generate the manifest.json file with things set for just a PWA.  I'm not generating anything for Android or iOS.  Can you try the app and dct files I sent and see if you can duplicate this on your side?

Thanks,

Jeff

[DonRidley]

I don't think you have sent any files to me Jeff.

But I would be happy to look at them. 

Don

[jking]

Don,

    I attached a zip to the original message.  I have attached here as well.  Let me know if you don't get them and I'll send by email.

Thanks,

Jeff

[DonRidley]

Ok.  I'll take a look at it today.

Don

[Bruce]

Hi Jeff,

There are 2 issues; One of yours, one of mine.

First yours -
Global Extensions
Activate Web Server
apps Tab
"All Browses should be file loaded" - tick this on.

Secondly mine;
In NetWeb.Tpw there are 3 cases where I used '[Net:NoAction]' and it should have just been 'Net:NoAction'
Lines circa 26956 and 26971 should be
 #IF(%menuItemActionX='Net:NoAction')

and line circa 26869 should read
 #IF(%menuActionX='Net:NoAction')

This should help you.
Fixed for 11.05, but you can make the appropriate fixes above yourself in the meantime.

cheers
Bruce

[jking]

Bruce,

     As always, thanks for your help...and Don too! 

     So, the changes to the NetWeb.tpw file did help resolve the issue for Changes (see image Change.png), but the blank form remains for Copies.  That is, when clicking on copy record, the form opens, but is blank.  Perhaps there is another few lines that need to be edited?  See image Copy.png.

     As for using "All Browses should be file loaded", when I do that, no locator appears above the browse.  See Browse.png.  In addition, now there are no column headers on the browse.  If I use DevTools and set to "mobile mode" then I do see headers, but still no locator field.  See image Browse_Mobile.png.

     I also have an issue with deletes, but I'll start another thread for that.

Thanks,

Jeff

[jking]

Bruce,

     After experimenting a bit more with the changes you recommended, I went back to "Page Loaded" mode again, to get a locator to appear on the browse.  I find that the forms that open when clicking Change, are back to being blank.  So, as you indicated in the previous post, I must use "File Loaded" mode.  Can you help me get the Locator to work in this case?  The locator is important for this app as I want the browse to open empty, then type a search term into the locator, to fill the browse with matching items.
     Assuming we get this to work, how can I get the locator to search over multiple columns?  I think I saw a webinar about the ClarionLive web app that shows this capability, but I don't know how it was done.

Thanks,

Jeff

[Bruce]

Hi Jeff,

Alas, Locators and page-loaded browses are not yet supported in mobile mode.

Cheers
Bruce

[jking]

Bruce,

     I find this confusing, as I can only get the locator to appear above my browse, in Page-Loaded mode.  It does seem to work, getting the record that matches what I enter into the locator field.
     When I use File-Loaded mode, I don't get the locator to appear, and I'm missing headers on the browse.  Can you please clarify?

Thanks,

Jeff

[Bruce]

The "disconnected mode" currently only supports file-loaded. If you change it to page loaded it'll get the data from the server, not the local data store. (There will be knock on problems from this though because it's not designed to work like this.)

Locators only work in Page-Loaded mode, so not yet available in Disconnected mode.

You should see headers - if those are missing it's because of something else (and I could check an example for you if you like).

cheers
Bruce

[jking]

Bruce,

Here are my comments:

1.  The statement:

"The "disconnected mode" currently only supports file-loaded. If you change it to page loaded it'll get the data from the server, not the local data store."

This is a key concept that I had not grasped until now.  It does make sense in the context of the mobile device being "disconnected".

2.  Since locators are not yet available in a disconnected app, can you suggest an alternative?  As it stands now, my browse will display all data in the local store (and sync with data on the server).  I want to start with a empty browse, and enter a term to search.  The browse should then be filled with only matching items.  For example, I may want the browse to only display silver dollars.  In a standard Clarion app (or a web app) this would typically be done with a locator.  In this case I suspect I may need to add an entry field to the browse.  I can then enter a search term here and filter the browse.  Is this what you would recommend?

3.  I mentioned that headers were not appearing on my browse.  This happens when I first open the app.  See the image BeforeDevMode.png.  After I go into DevMode and format for an iPhone6, I do see the headers to the left.  See image AfterDevMode.png.  I suspect this might be a CSS issue.  What do you think?  I have attached a zip file with the app and dct files should you want to see the app.

4.  Can you address the dotted line seen on the right of all browse/forms?  See image DottedLine.png.  Is this something new or required?  If not I would prefer it not show.

Thanks,

Jeff

[Bruce]

I haven't had a chance to look at the app yet, so here are some, but not all, answers...

>> 2.  Since locators are not yet available in a disconnected app, can you suggest an alternative?

my guess would be a memory form, containing a search field, and then using that search field int he browse filter.
BUT ... the filter on the browse would be a JavaScript filter - and this is constructed a little differently to a Clarion filter.

Here's an example from one of my apps, in this case filtering on a date;

'return record.date >= $("#cloFromDate").val() ? recordOk : recordFiltered;'

Breaking that down;
the above is a sort of if / then / else in JavaScript (or CHOOSE). so this reads as

'return IF record.date >= $("#cloFromDate").val() THEN recordOk ELSE recordFiltered;'

The only bit you really need to change is the comparison part- ie

record.date >= $("#cloFromDate").val()

cloFromDate is the field equate on the form. (the form contains the date, and the browse, and the form field is set to reset the browse field in the normal way.)

So let's assume you are searching for a string "in" some description field. Let's assume your search field is called JeffSearch. (remember JavaScript is Case sensitive.)

Also let's assume your field in your coin table is called description. (unlike Clarion you don't use the table prefix here, it's always record. )

Last piece of the puzzle is the JavaScript "instring" - there are a couple options here, but the simplest is indexOf. (returns -1 for not found)

Putting that all together we get

'return record.description.indexOf($("#JeffSearch").val()) >= 0 ? recordOk : recordFiltered;'

Then, I'm presuming you want the comparison to be case-insensitive. So SILVER matches silver. The above test is case sensitive. So I think;

'return record.description.toLowerCase().indexOf($("#JeffSearch").val().toLowerCase()) >= 0 ? recordOk : recordFiltered;'

I have not tested the above so please let us know if it works, or needs further syntax refinements...

Cheers
Bruce

[DonRidley]

Hello Jeff,

I apologize for not getting back with you regarding your app.  I've been neck deep in getting an app ready to deploy before a deadline.

I can't add much that Bruce hasn't mentioned.  I can give my opinion or impression of creating mobile apps with Clarion/NetTalk.

Think of it this way; Clarion's wizards build a rough framework of an application that you can then modify to suit your needs.  You use embeds to perform this customization. 

NetTalk builds your mobile app in the form of a single page HTML page - index.html.  All of your forms, browses, etc., exist in there.  NetTalk builds a rough framework that you will need to modify to suit your needs.  Your "embed" is your custom.js file.  Unlike the standard NetTalk web apps, you will have to use Javascript at some point to take the NetTalk built app to the next level.  It can be a pain the rear if you're not fluent in JS but it's doable.  You may have to blow up Google's search engine like me but it's doable.  LOL.  I bet I have read NetTalk's documentation on mobile apps a least 100 times just to try and get my mind wrapped around it.

Anyway, I wish you the best and feel free to email me if you have questions.  I may not have the answer but maybe I can get you pointed in the right direction.

Don