You wont be playing with the HTML client for too long before you realise you need to work with some HTML! There are a number of jQuery editors out there, and they seem to be relatively easy to plug into Lightswitch.
Image may be NSFW.
Clik here to view.
One suggestion though…make sure you choose one that looks clean and simple – there is nothing worse than looking a phone application that has a bunch of crowded colored icons. The one that I have chosen here is called Redactor – possibly the nicest looking editor available. It also has a cool air-mode, which enables your editor to look like a normal text box, but popup with HTML editing features when text is highlighted as shown here:
Image may be NSFW.
Clik here to view.
Redactor can be found here. Note that it is not free – but you could easily find some free alternatives. Take a look at this website for 10 examples.
Integration is reasonably simple. Start by downloading a trial version of redactor. Switch to file view in your project.
Image may be NSFW.
Clik here to view.
Then add in the redactor javascript and css files like this:
Image may be NSFW.
Clik here to view.
Then edit the default.htm file which is found under the client project, and reference the above 2 files. You can insert the CSS reference just below the other CSS references, and the Javascript file just below the other scripts.
Build your screen
Change one of your fields to a textarea.
Image may be NSFW.
Clik here to view.
Then with that same field highlighted, modify the post render event using the ‘Write Code’ button. The code should look like this:
myapp.AddEditProfile.EmailSignature_postRender = function (element, contentItem) {
// Convert the textarea to a html editor...
$(element).find("textarea").redactor();
// When the editor loses the focus, tell the change event to fire so Lightswitch recognises that the value needs saving...
$(element).find(".redactor_editor").blur(function () {
$("textarea").trigger("change");
});
};
Now run your application, and you should be presented with HTML editing for that particular field.
Note: the redactor control has a couple of glitches when being displayed on a dialog screen with the popup menus for links and colors…this doesn’t seem to affect anything if the screen is converted to a normal (non-dialog) one. This is shown below.
Image may be NSFW.
Clik here to view.
Best of luck. Let me know if you have success with other editors.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
