locked
Extending LightSwitch HTML Client RRS feed

All replies

  • Thank you Michael for good post. Was looking for tutorial about html client controls. Any idea for Controls itself, not for screens. I saw couple of your comments about Component One.
    Thursday, November 21, 2013 12:55 AM
  • All we have right now is HTML Screens. However, we should be able to imbed controls in the screen templates. As far as HTML controls by themselves we have no API at the moment. ComponentOne is using proprietary technology to make their HTML controls work.

    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Thursday, November 21, 2013 1:05 AM
  • Hi,

    You can make custom HTML controls appear in the screen designer, I already did it. Shall I blog it?

    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.

    Thursday, November 21, 2013 3:43 PM
  • Hi,

    You can make custom HTML controls appear in the screen designer, I already did it. Shall I blog it?

    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.


    Dave is right - it's quite easy. I've been doing for my company since the HTML client was released, but I've only been given permission recently to share the details.

    While it's great that Component One released a nice suite of controls for developers, unfortunately they chose a poor method to write their custom control extension such that it doesn't play nicely with others that use the same integration hack. It's been a while since I looked at it, but from what I remember, they re-declare/overwrite the Microsoft custom controls with their own, taking over the single custom control per control type that gets a render() method. Obviously, no other vendor could do the same thing and be installed simultaneously, thus reducing choices for developers that might want to use controls from multiple vendors by forcing them to pick only one.

    However, there's a better way to write LightSwitch HTML custom control extensions that integrate in the designer on par with the native controls that DOES allow an arbitrary number of custom controls and extensions to be installed - including Component One's. It allows custom properties and such, doesn't require brittle code generation, and provides a potentially richer set of events than simple render() or postRender(). I'll be sharing the techniques with some open source nuget packages and gallery extensions in the near future.

    Cheers,
    Robert
    Tuesday, November 26, 2013 10:42 PM
  • Hi Robert,

    I concur with your findings. We have moved ahead significantly since the early days of hacking the HTML controls. Internally we have extended msls.n.js to implement custom views but it is unlikely that we will release details of this any time soon. If this lines up with your work, perhaps we will too.

    We have also significantly extended templating beyond the standard LightSwitch screen templates to the point that full application templates and generation are now within reach. Great for POC,s demos, R&D helping to improve development standards. It is fun to hear that new tools save loads of LightSwitch development time when LightSwitch is already RAD in the first place. As things stand this will be packaged with AIDE 2013 for LightSwitch.

    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.

    Tuesday, November 26, 2013 10:58 PM
  • Hi Dave!
    When AIDE 2013 for LightSwitch will be released?

    Thanks

    Nick

    Tuesday, November 26, 2013 11:32 PM
  • Hi Nick,

    We are pushing hard for the end of this week. Some interesting new goodies to follow next week :)

    We have been hit in testing by larger projects displaying instability and poor IDE performance in VS2013. We are satisfied that it is not us but you always have to double check. (there is another thread on this performance topic).

    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.

    Tuesday, November 26, 2013 11:38 PM
  • Hi Dave,

    That all sounds very interesting. Hopefully once I start publishing my backlog of half-written blog entries (ah - if only I could crank them out like Michael!), you might be motivated to share some more of what you've been up to. LightSwitch certainly has the potential for much more design-time and runtime extensibility than I really see being leveraged around the web (publicly, at least). While I'm not currently an AIDE user, it looks like a really cool product, and it's clear from that alone that you're not afraid to dive into LS internals and get your hands dirty ;)

    While msls hacking is fun and opens up all kinds of possibilities, we've chosen not to alter the standard source files to avoid potential update headaches and make new project integration easier (although we're leaving the option open in the future if we need it). Fortunately, we can accomplish our current extensions while keeping them intact. We also modularize everything into NuGet and/or VS extensions in our private feeds as much as possible for easier sharing.

    Cheers,
    Robert
    Wednesday, November 27, 2013 12:05 AM
  • Hi Dave,

    This sounds awesome; can't wait for it!

    With regard to the VS2013 performance issues you describe, I'd be interested to know of any progress or feedback you have received from the Team?

    I have an issue here which to date has received no response; is it the one to which you are referring or something else? To be honest it's a complete nightmare!

    Ian


    Ian Mac

    Wednesday, November 27, 2013 7:41 AM
  • Hi Ian,

    That is the thread I hinted at, I have not had any feedback, but really need to find some time to investigate and serve up a reproducible scenario on a plate. I think we will have that now. Not sure it is just LightSwitch but some of it clearly is, I have noticed unprecedented automatic background builds churning away for no apparent reason and freezing the LightSwitch IDE for many seconds at a time on larger projects.

    That is as far as I got. It does make LightSwitch in VS2013 unusable at times, it is a major problem! Help! Is there a Connect issue logged?

    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.


    • Edited by Xpert360 Wednesday, November 27, 2013 10:14 AM
    Wednesday, November 27, 2013 10:13 AM
  • Hi Dave,

    Actually as I sit here my LS HTML project (design-time, query designer open) has not had anything changed within it for 30 minutes. Yet the VS process is consuming between 52% & 57% CPU with the CPU fan blazing away; curiously 0% Disk activity from the process.

    This happens a lot and is incredibly frustrating!

    Ian


    Ian Mac

    Wednesday, November 27, 2013 10:39 AM
  • Rob or Dave,

    I know this is an stale posting.. .but... I would really like to know if either of you produced any public information on extending the html client with custom controls and properties?

    dale

    Saturday, October 18, 2014 12:26 AM
  • Hey Dale,

    I haven't got around to doing a blog either but my method goes like this:

    (disclaimer: To my knowledge, control extensions for HTML client are not yet supported by MS)

    Create a LS Control Extension Project

    in Common\Metadata\Module.lsml

    Add the following to the Module Node:

    TargetPlatform="MobileWeb"

    Add a Control to the project

    in <controlName>.lsml

    add the following to Control node:

    BaseControl="Microsoft.LightSwitch.MobileWeb:TextBox"

    The base control can be any control in MobileWeb Namespace.

    At this point, upon debugging & adding the extension to an HTML project, your control will show up in the designer for HTML client screens.

    If you use a BaseControl like TextBox, you get the designer properties that come with the oob control.  You can add custom properties in the Control Extension project to get additional ones.

    Now it's up to you to implement the control rendering and property mapping in your javascript.

    I do this by extending msls and exposing the variables\functions that are not added to the msls namespace and then use those in an external script to define the control and add it to msls.ui.controls namespace.  After exposing msls objects and functions, it's fairly easy to copy the pattern of control definition (_fillTemplate, _attachviewCore, _refreshView, etc) out of their script and make your own.  The last important part being msls_createControlMappings function which does the designer property to client property mapping\binding magic.

    It would be sweet if we could hash out a common method of extending msls using the bare minimum change to the source file.  The hope being that control extensions would catch on and MS may alter the script in a future release making this supported with zero change to their source. 

    I am working on an extension to add the built-in, hidden 'ContentControl' to the designer in effort to see if I can easily render declarative data-bound HTML from template files.  It might work out, might not.  I'll keep you posted.

    HTH,

    Josh


    • Edited by joshbooker Saturday, October 18, 2014 2:25 PM
    Saturday, October 18, 2014 2:15 PM
  • Hi Dale,

    Thanks for reviving this! I got distracted a bit with other things over the past, um...year?!? Jeez...has it been that long already? yikes o.O

    Anyway, I was just wondering last week about publishing that lightswitch html custom control stuff along with some other things I've been working on. Your reply is a convenient excuse to get back on it :-) Some of it is written up already, so I should be able to get something out with the main ideas and techniques over the next week or two. I think you'll like the approach and will find it useful from what I see you've doing on your blog.

    Cheers,

    Rob

    Sunday, October 19, 2014 3:41 PM
  • Very interesting thread that I'm keenly interested in, so "subscribing".  

    Josh, being able to render declarative data-bound HTML will be the holy grail... either from a template or from javascript. If we can extend that concept to custom entities or custom attributes, say generated on the fly from JSON, that would be even better.

    I have one specific scenario where an entity has a string property called .CustomFields that contains an XML fragment of user-defined fields/properties. It is XML rather than JSON due to SQL server better supporting XML at this point, but the XML can easily be transformed into JSON (and back into XML) on the client side. I would like to render those fields dynamically for editing purposes and have them all bound to the underlying Entity.CustomFields property. Basically, updating any of those fields would read all the fields, compose the XML fragment and update the Entity.CustomFields. That way the built in dirty checking should just work. Well, that is the conceptual idea anyway.


    Regards, Xander. My Blog

    Sunday, October 19, 2014 8:39 PM
  • Hi Xander,

    That should be pretty straight-forward with the method I'll be publishing. The "hello world" sample I'm starting with only uses a simple mustache-style syntax to populate fields in a read-only template from a collection, but that's just for demo purposes to avoid complication while showing how everything fits together. Once past the basics, I'll be showing how to extend things, including the dynamic rendering/binding you're looking for.

    Cheers,
    Rob
    Sunday, October 19, 2014 9:47 PM
  • Thanks Rob, it sounds great and I think we are all looking forward.

    Regards, Xander. My Blog

    Sunday, October 19, 2014 9:57 PM
  • Chaps,

    Some of this stuff sounds fantastic, I'm in for this; can't wait to see some of these Holy Grails!


    Ian Mac

    Monday, October 20, 2014 9:23 AM
  • Hey guys,

    Did any blog posts or tutorials get created showing how to create the custom controls?

    Dale

    Saturday, January 10, 2015 3:26 AM
  • Hey Dale. I did not publish anything yet nor have I seen. The steps I listed above are all I got at this point. I did get info from Dave Kidder saying as far as he knows html control extensions are supported and Syncfusion is doing it (sort of). I got my content control to render but had some issues around editable property mapping and shelved it for now. Was gonna check with Derek Spurlock about property mapping but never got to it. I could share my control extension project if you'd like to look over it. Have a great weekend. Josh
    Saturday, January 10, 2015 3:53 AM