none
Occasionally Connected LightSwitch HTML Apps Using JayData RRS feed

  • General discussion

  • JayData, as many are probably aware from prior blog posts and discussions on this forum, is a powerful JavaScript utility library for OData providers, including LightSwitch.  Recently, the JayData developers have expanded the provider offerings to include many other database programmatic interfaces.  Their latest release, JayData 1.3.6, codenamed “Advanced Sync Edition,” aims to support occasionally connected apps by exploiting the local storage capability of the browser (Web SQL. sqLite, IndexedDb, etc.).  Development is simplified when using the same data model and API for writing to both local storage and the OData endpoint.

    An example of this is shown at How to Create a Synchronized Online-Offline Data App with JavaScript and JayData.  This model, the “To Does” project, was successfully adapted to a LightSwitch HTML app without difficulty.  Although “To Does” projects like this serve as a nice proof-of-concept, they are excessively simple compared to real world business applications.  Fortunately, JayData 1.3.6 also includes support for configurable foreign keys.  With this, more complex object-relational mapping that would typically be used with Entity Framework and similar RDBMS may be approximated.

    To illustrate, the To Does project was expanded to include entity relationships.  Specifically, a To Do must be assigned to a single individual Project, and any single Project can have many To Does.  A Project can be assigned to an Employee or to multiple Employees, while an Employee can have a single Project or many Projects, thus defining a many-to-many relationship between Employee and Project.

    So how might and online-offline LightSwitch HTML application work in practice?  Ideally in my opinion, the transition from online to offline and back should be seamless and transparent to the user, allowing for both UX and UI to be unperturbed.  This approach turned out to be too difficult for me as a developer, as I experienced problems with the closed-end nature of LightSwitch’s Visual Collection object, for instance. Separation of concerns is a real challenge with this approach.  There is also the separate UI approach for both offline and online data entry, which have been nicely illustrated by Michael Washington and Paul van Bladel on their blogs using JayData and BreezeJS with AngularJS alongside a LightSwitch HTML app.  This approach is valid, and from the viewpoint of the developer has its advantages. From a design standpoint, it is likely to be frustrating for an end-user who must deal with “spotty” network coverage, necessitating changing back-and-forth from one UI to another.

    I opted for a hybrid approach, staying entirely inside the LightSwitch HTML app environment but having individual menu options to select depending on the user’s online status, which is constantly displayed with a status icon (see Main Menu figure).  In many cases, the native LightSwitch screen and menu buttons are fully functional in the offline state.  When they are not, most often with regard to a “Browse” screen or involving a Visual Collection, I have substituted the updated WinJS library (now at version 4.0, capable of replacing LightSwitch’s v1.0 with no breaking changes) to create a custom control that resembles the LightSwitch listview.

    To use the app, you can use any of the online Menu buttons to enter Employee, Project, or To Do data in the usual way while connected.   The Offline menu buttons are functional in either a connected or disconnected status, which can be tested by disabling your devices WiFi, for example.  This LightSwitch app does not work with all browsers, however.  Because the local database is stored using the Web SQL/sqLite JayData API, it is not supported by either IE or FireFox.  It is supported by Chrome, Safari, Opera, Android browsers, Kindle Fire, and iPad browsers (see link).  To see the local data stored in Web SQL while using Chrome, you can press F12, select Resources, and expand Web SQL to see the Table data updated with each transaction (see figure).

    After entering data using the Offline menu selections, you will want to synchronize your local data with the remote LightSwitch database, which is performed by clicking “Synchronize Offline to Online” on the Main Menu.  A success or error dialog message should follow, depending on the result of the sync.  The dates and times of the last synchronizations are displayed on the Main Menu.  With each online database transaction, including offline to online syncs, the offline database is updated to reflect the very latest LightSwitch application data.  This method attempts to have the LightSwitch online database as the “single source of truth” as much as possible while the user is online.

    Lastly (if anyone is still reading this far), note that by design there is no business logic programmed into this application; business logic is a separate issue to be addressed.  There can be as many incomplete To Does as you want, an Employee can be assigned the same Project many times, etc.  If your application requires business logic, you will have to program it into the client-side in order for the user to be prompted to follow it while offline.

    To experiment with LightSwitch OfflineToDoes app, go to: http://offlinetodoes.azurewebsites.net/htmlclient

    …and log in with username “testuser” and password “Testuser1!”  In a few days I will try to load the sample project code to MSDN for anyone to download and review if desired.

     

    TL;DR:

    JayData provides an attractive solution for creating online-offline LightSwitch HTML apps by automating a single codebase to carry out CRUD operations on both a local datasource and the remote LightSwitch database.  Integrating the offline portion of the app into the LightSwitch UI requires an individualized solution and is code-intensive, however.

    Friday, January 2, 2015 4:55 AM

All replies

  • Thank you...

    Hope to see a working sample application.

    Thanks


    Rashmi Ranjan Panigrahi
    www.lightswitchspecial.com

    If you found this post helpful, please “Vote as Helpful”. If it answered your question, please “Mark as Answer”.
    This will help other users to find their answer quickly.

    Friday, January 2, 2015 5:00 AM
  • Hi,

    This is great. Played around with your demo and it worked good.

    Love to hear more about your progress.

    Sven


    Sven Elm

    Friday, January 2, 2015 9:48 AM
  • Wow!

    The browser limitation is not an issue because anyone who needs this is usually for an application where you can easily dictate the web browser to be used.

    One of the most exciting things was how you were able to just swap out the latest WinJS with no breaking changes. Your online/offline indicator is also something most apps could use.

    Looking forward to a walk thru article with code. You may find the largest audience can come from the SharePoint developers.

    I played with the example and it worked. I am looking forward to working on the HoverCraft project... :)


    Unleash the Power - Get the LightSwitch 2013 HTML Client / SharePoint 2013 book

    http://LightSwitchHelpWebsite.com



    Friday, January 2, 2015 1:18 PM
  • Oh not only for Sharepoint Developers!, GREAT JOB!

    Eric

    Friday, January 2, 2015 4:37 PM
  • Amazing !

    @LittleBobbyTables, well done and happy new year !


    paul van bladel ==independent enterprise application architect== http://blog.pragmaswitch.com

    Friday, January 2, 2015 5:32 PM
  • Hi and Many Thanks

    This is exactly what I was hoping would become available.

    I posted a comment to the below wish-list item with the VS Team.

    http://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/2145613-support-for-online-offline-database-sync-for-field 

    JayData seems to be the solution.

    Best regards, Mark.


    Mark

    Saturday, January 3, 2015 8:55 AM
  • Works as advertised offline on my 2012 nexus 7 after I temporarily disconnected from my wireless-n network although it dropped it's Lollipop when I tried to go into Settings (Android 5.0 rebooted itself!!!) to disconnect. It was almost as if I was running Windows ;-) Difference being that it kindly reignited apps that were running when it crashed.

    Good work. I'm looking forward to seeing how you've achieved this result when you load the sample project code to MSDN. About a year back I was asked if LightSwitch could handle data entry when offline. I had to say that it really expected to always be connected. Nice to be able to answer 'yes' to that question in the future.


    Z A R D O Z

    Saturday, January 3, 2015 11:49 AM
  • Thanks everyone for the positive feedback.  It's rewarding to see LightSwitch able to be stretched beyond its known capabilities, whether online-offline, new WinJS, or the latest SharePoint stuff Michael's been producing. These might serve us all by prying a couple of nails out of the LightSwitch coffin, and keep folks saying "Wow I can't believe that is a LightSwitch Application!" longer in the future, as Michael had as his website's tagline back in 2011. ;)

    I had held off uploading the code to MSDN primarily because I thought that when I made it available here I would also get some constructive criticism, feedback, or awareness of some glaring bugs I had missed, allowing me to make some revisions beforehand. The code is fairly well commented. Online-offline is not something I am developing in "real life" so I probably won't be developing the project much further.  I also don't work in SharePoint at all, so any SP developers can adapt the code techniques to their needs.  Michael clearly knows both SP and JayData very well and is welcome to use any of the project's codebase protocol adapted to a SP blogpost if it suits him.  I would of course try to help on this forum anyone trying to use JayData in an online-offline LS project and experiencing difficulty.

    I'll give it another 24-48 hrs then upload the code along with some known issues.

    Saturday, January 3, 2015 4:59 PM
  • Nice job Allen. We could probably priced better feedback once we see the screen code. Thus has me thinking about whether it's feasible to use the indexeddb store available out of the box in data.js. Also whether the jaydata generated data service could be dynamically built from the LS generated model data.js. Thanks for posting this ! Keep up the great work.
    Saturday, January 3, 2015 5:09 PM
  • Anything that works with normal LightSwitch should work with SharePoint. SharePoint is a growing market for LightSwitch so that is why I mentioned it. After you post the code I will see how it works with SharePoint. What I hope is that when the app connects it will show the login screen.


    Unleash the Power - Get the LightSwitch 2013 HTML Client / SharePoint 2013 book

    http://LightSwitchHelpWebsite.com

    Saturday, January 3, 2015 8:28 PM
  • Since you asked :-) I didn't want to nit-pick but there are a couple of bugs I noticed :

    • Project Budget $ value entry or update is not persisted . . . online & offline
    • Project 'To Do' (Note: says 'To Does' when offline) Add To Do button ('-' icon not plus) is not working online
    • Project 'To Does' (Note: says 'To Do' when offline) Add To Do button ('+' icon) after saving a 'To Do' it displays 'To Do: null' but when synced successfully the 'To Do' is not persisted

    >>>Lloyd...


    Z A R D O Z

    Sunday, January 4, 2015 1:29 AM
  • Likewise I did some quick tests and noted that navigation back from offline screens does not behaviour as online screens. Too many entries in history I think. Well done though and I will take a better look at it next week. We have delivered some occasionally connected client apps in the past so are familiar with designing them, will be great to have a 'less code' implementation with LS. I would think that more offline web app is needed as a starting point. Cheers Dave

    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    Sunday, January 4, 2015 9:48 AM
  • Thank you both for the input. Zardoz, I tried making a couple of updates to address items you mentioned.  I left unfixed the problem that occurs when editing an offline Project's budget item..this still does not work.  LightSwitch identifies this entity as a decimal, WebSql expects a plain number, but LightSwitch's post-processing business type formats it to currency (I see USD, you may see NZD, AUD, etc.)  In the console there is a "getModel() is undefined" in msls.js.  If I take out the Money business type to regular Text on the View, it works fine.

    I'm not sure if I understood your last item just right, but I tweaked the Add Edit Offline Project screen to prevent the Project from being null if the user only enters a new To Do. Not sure why the screen validation wasn't firing before.

    Regarding navigation, I don't wish to use the browser's back or forward buttons at all for the app, especially the Offline portion, only the LightSwitch menu navigation and command buttons. I know Xpert360 has shown how to put the former LightSwitch back button in the app which is useful too. Navigation, cacheing and disposing were some of the tricky parts getting to integrate between LightSwitch UI and offline custom controls.  Occasionally I felt like I was having to be "clever" at solutions, except that when it comes to programming, I'm not a fan of cleverness.

    The project is published here. Hopefully this serves as a good starting point for someone, and I look forward to seeing how it can be improved upon and used in practice.

    Sunday, January 4, 2015 3:51 PM
  • The project is published here. Hopefully this serves as a good starting point for someone, and I look forward to seeing how it can be improved upon and used in practice.


    Great :) I will take a look at this next week to see how it behaves in SharePoint.

    Unleash the Power - Get the LightSwitch 2013 HTML Client / SharePoint 2013 book

    http://LightSwitchHelpWebsite.com

    Sunday, January 4, 2015 4:15 PM
  • Great :) I will take a look at this next week to see how it behaves in SharePoint.


    I tried to publish it in SharePoint but the publishing wizard kept failing with errors like:

    Error 1 The "SetAppSetting" task was not given a value for the required parameter "AppSettingValue". C:\Program Files\MSBuild\Microsoft\VisualStudio\LightSwitch\v4.5\Publish\v2.4\Microsoft.LightSwitch.Publish.targets 755 10 ToDoesProject

    I suspect that the problem was that I was trying to alter a existing LightSwitch project that was customized into a SharePoint project. If anyone else has time to work on this further I suggest trying to start with a LightSwitch Cloud Business app and then incorporate the changes.

    I regret I wont have time to work on it myself :(


    Unleash the Power - Get the LightSwitch 2013 HTML Client / SharePoint 2013 book

    http://LightSwitchHelpWebsite.com


    Monday, January 5, 2015 6:21 AM
  • Really amazing! Exactly what I was looking for to deal with some offline scenarios in Africa!

    Published to Azure successfully!

    Keep up the great work and thanks for the effort in doing this.

    Wednesday, January 7, 2015 5:03 PM

  • I tried to publish it in SharePoint but the publishing wizard kept failing with errors like:

    Error 1 The "SetAppSetting" task was not given a value for the required parameter "AppSettingValue". C:\Program Files\MSBuild\Microsoft\VisualStudio\LightSwitch\v4.5\Publish\v2.4\Microsoft.LightSwitch.Publish.targets 755 10 ToDoesProject


    The problem was some sort of hiccup in the pubwiz ('cannot create folder PublishProfile a file by that name already exists') preventing it from creating the PublishProfile xml files which are used to set the clientid and secret among other things.  I got it to work by copying the files from another project then going through the pubwiz a couple more times the errors went away.

    Anyway, it does run as a provider hosted sharepoint app just the same.  I cannot always get the offline lists to render or sync on iphone and get 'some object is undefined' errors if I refresh the browser, but that's true for the azure demo too.  Still, this is a nice piece of work.

    I just wish there was a common local storage mechanism for all browsers\devices.

    HTH,

    Josh

    Wednesday, January 7, 2015 7:39 PM


  • The problem was some sort of hiccup in the pubwiz ('cannot create folder PublishProfile a file by that name already exists') preventing it from creating the PublishProfile xml files which are used to set the clientid and secret among other things.  I got it to work by copying the files from another project then going through the pubwiz a couple more times the errors went away.

    Anyway, it does run as a provider hosted sharepoint app just the same.  I cannot always get the offline lists to render or sync on iphone and get 'some object is undefined' errors if I refresh the browser, but that's true for the azure demo too.  Still, this is a nice piece of work.

    I just wish there was a common local storage mechanism for all browsers\devices.

    HTH,

    Josh

    You are a Rock Star!

    (also a person that knows more about LightSwitch and SharePoint than I do :))


    Unleash the Power - Get the LightSwitch 2013 HTML Client / SharePoint 2013 book

    http://LightSwitchHelpWebsite.com


    Wednesday, January 7, 2015 8:25 PM
  • On futher inspection it looks like there's a bad file in the project download.  This would likely cause errors in the pub wiz for any type of deployment.  

    Normally, on first publish, a folder called 'PublishProfiles' is created in which LS pub wiz stores publish settings.  This project download has an file with no extention called PublishProfiles which causes the errors during publish.  This file should be deleted from the server project \Properties directory before publishing.

    HTH,

    Josh

    Wednesday, January 7, 2015 8:28 PM
  • I -did- delete the file and tried publishing again and again and it did not work for me.

    So the fact that you got it to work... well I don't know what to say other than 'well done' :)


    Unleash the Power - Get the LightSwitch 2013 HTML Client / SharePoint 2013 book

    http://LightSwitchHelpWebsite.com

    Wednesday, January 7, 2015 8:32 PM
  • Yeah if you deleted after first getting the error, it doesn't fix.

    If you start with a new copy of the solution then first delete the file before attempting to publish it's fixed.  Weird, I know that's definitely a pub wiz hiccup.

    >>(also a person that knows more about LightSwitch and SharePoint than I do :))

    Ha, very funny!

    Wednesday, January 7, 2015 8:41 PM


  • The problem was some sort of hiccup in the pubwiz ('cannot create folder PublishProfile a file by that name already exists') preventing it from creating the PublishProfile xml files which are used to set the clientid and secret among other things.  I got it to work by copying the files from another project then going through the pubwiz a couple more times the errors went away.

    Anyway, it does run as a provider hosted sharepoint app just the same.  I cannot always get the offline lists to render or sync on iphone and get 'some object is undefined' errors if I refresh the browser, but that's true for the azure demo too.  Still, this is a nice piece of work.

    I


    Thanks Josh for getting the sample to upload to SP.  I had never published a project to the Gallery before and in doing so, I had stripped out the Silverlight project I used to create the testuser and tried to strip out my Azure settings, probably not doing it exactly right and causing some of the trouble you guys are now experiencing getting it to be SP-ready.

    The app will alert an error of undefined if you F5 on any Offline page other than the Main Menu, this is a known issue.  You can let me know which things are not working on the iPhone if you like. Although I did some beta-testing of the app before and was successful with an iPad that I have assigned from my work, there is no way in hell I'm getting my hands on an iPhone--I'll see what happens on the iPad again.

    Wednesday, January 7, 2015 9:10 PM
  • Hi Allen,

    I get slightly different behavior using your demo site on iPhone than iPad. 

    For example, on iPhone > Offline Projects | Add,  after tapping Offline Save, the screen doesn't navigate.  I know the offline save worked, cuz after tapping it ten times and then using the menu to nav back to Offline Projects, I see it ten times in the list.  Could be my phone too cuz the app locks up  on tap Offline Save and I cannot see the whole url to get out of edit page.

    One thing that happens on iPad is the Online to Offline sync is working but offline edits to online are not.  I can create a new project offline, then click sync on menu and it see it online.  Cool!  Then if I go and edit the project offline, hit offline save and the change persists in offline data.  Then hit Sync on menu, but change doesn't persist in online data.

    Anyway, I mention this because you asked, but don't feel like you should work on it on my behalf.

    This is a nice POC, as is.

    If you do find yourself making changes to the gallery project, just delete the PublishProfiles file in server project properties directory and it should be fixed.

    Cheers,

    Josh

    Wednesday, January 7, 2015 10:02 PM
  • I'll take that PublishProfile out of the sample project to make it easier on anyone trying to deploy it.

    The Offline Project issue not syncing on the iPad sounds like a bug, I will take a look at it.

    Thursday, January 8, 2015 3:48 AM
  • Hi,

    Successfully deployed to IIS server but if I add a new let say Employee I first get

    (undefinedundefinedundefined). On second save it saves to online database but never to local database.

    The same thing when I try to sync. The local data is never synced.

    Tried on iPad and Chrome on computer.

    Maybe it's not possible to run on a IIS server.

    Nice though (if I get it to work).

    Good work anyway

    Sven


    Sven Elm

    Thursday, January 8, 2015 6:58 AM
  • Hi,

    Did this in my solution and it works great, but I have a question.

    In my table I have a boolean and when checked the Query return only data that's not checked.

    Where and how do I do this.

    Thanks

    Sven


    Sven Elm

    Wednesday, February 25, 2015 11:02 AM