visual studio lightswitch HTML : How do I place static text on a Browse screen

Question

I want to add some Help screens to my project but I don't know how to add static text to my screens. I created a browse screen called Help and opened the Help.isml.js. Does JavaScript have a way to output text to a screen ? or maybe place HTML? I thought it would go here:

myapp.Help.created = function (screen) {
    // Write code here.
    //put static text here ...
    //I tried this but it looks a bit strange
    document.write('<b>Getting Started</b>');
};

I found out I can use this:

var myWindow = window.open("", "MsgWindow", "width=200, height=100");
 myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");

I'm hoping to gather more suggestions. Thanks

Answer 1

Whilst a multitude of different options are at your disposal, probably the best method is to simply add a local string property data item to your screen.

Taking this approach will ensure that the text becomes part of the screen's responsive layout and adapts to the browser windows size.

Adding this can be done by first selecting the "Add Data Item..." button at the top of the screen designer and specifying the property details as follows:

This property can then be dragged into your screen's content tree as follows:

Finally, you'll need to add the following code to your screen's created method (by selecting the "Write Code\General Methods\created" button at the top of the screen designer):

myapp.Browse.created = function (screen) {
    // Write code here.
    screen.HelpProperty = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
};

This will result in the following Browse screen:

By working within the standard LightSwitch screen designer, this approach can be easily extended to implement a more traditional popup help system which would appear as follows:

This is achieved by changing the control type of the HelpProperty from Text to Paragraph and then dragging it onto a new Popup. The help can then be accessed by adding a Button to show this added Popup.

The following shows how the screen design should be structured for this type of approach:

And the following shows the settings for the added button:

If you'd like to build upon this technique, the following blog post contains a related example that provides an entry specific help system:

Visual Studio LightSwitch Team Blog: Interacting with Content Items on the Screen with the LightSwitch API (Kevin Mehlhaff)