locked
How do I add content to a Lightswitch html Add/Edit Screen? RRS feed

  • Question

  • In a Lightswitch 2013 html project (c#) I have an add/edit screen in which I would like to add text boxes or labels to the screen to provide users with needed information, help and instructions as they fill out the form I have made.  In the LIghtswitch Desktop Client there is a way to add "Text" and "Image".  Is there an equivalent to this in the HTML client? 
    Monday, August 17, 2015 7:20 PM

Answers

  • Correct. On the screen where you wish to display some Instructions, for example, you would first use the Add Data Item button to create a local Property called "myInstructions" (or whatever you like) and give it a data type of String.

    Actually, you don't even have to place the initialization code in the created() function.  Just drag "myInstructions" from the left-hand side of the screen to wherever you want it, and then edit its postRender code from there to change the element.innerText property.  Like this:

    myapp.MyProgramMainScreen.Instructions_postRender = function (element, contentItem) {
        // Write code here.
        element.innerText = 'This form is to be completed no later than 24 hours after any significant reportable event.';
    };
    That's for simple text fields.  Images may be a bit trickier, as you would have to be able to retrieve them from the server before you displayed them, if they weren't stored as binary fields in one of your tables.  In any event, you can still use the custom control/render() method to set the element's innerHTML (instead of innerText) to some string like "<img src='http://myservername/myappname/Images/mainScreenHelpImage1.png' />" like you would if you were coding the web page by hand.

    • Proposed as answer by Angie Xu Friday, August 28, 2015 2:43 AM
    • Marked as answer by Angie Xu Monday, August 31, 2015 1:20 AM
    Monday, August 17, 2015 8:53 PM

All replies

  • Just use a Custom Control, and write HTML to display what you're trying to show the user. Or, add some local properties to the screen with the Add Data Item... button, drag them onto the screen where you need them, change their display type to text, or paragraph, or whatever, then set their values in the screen's created() event.
    Monday, August 17, 2015 7:32 PM
  • R.T. Watkins,

    This is helpful to the point of "set their values in the screen's created() event".  Can you elaborate on where or how I set the value? I assume by "value" you mean the text or image that I would want to show up on the screen at runtime.  Thank you for you help, Regards, Mark 


    • Edited by mark269 Monday, August 17, 2015 8:21 PM
    Monday, August 17, 2015 8:20 PM
  • Correct. On the screen where you wish to display some Instructions, for example, you would first use the Add Data Item button to create a local Property called "myInstructions" (or whatever you like) and give it a data type of String.

    Actually, you don't even have to place the initialization code in the created() function.  Just drag "myInstructions" from the left-hand side of the screen to wherever you want it, and then edit its postRender code from there to change the element.innerText property.  Like this:

    myapp.MyProgramMainScreen.Instructions_postRender = function (element, contentItem) {
        // Write code here.
        element.innerText = 'This form is to be completed no later than 24 hours after any significant reportable event.';
    };
    That's for simple text fields.  Images may be a bit trickier, as you would have to be able to retrieve them from the server before you displayed them, if they weren't stored as binary fields in one of your tables.  In any event, you can still use the custom control/render() method to set the element's innerHTML (instead of innerText) to some string like "<img src='http://myservername/myappname/Images/mainScreenHelpImage1.png' />" like you would if you were coding the web page by hand.

    • Proposed as answer by Angie Xu Friday, August 28, 2015 2:43 AM
    • Marked as answer by Angie Xu Monday, August 31, 2015 1:20 AM
    Monday, August 17, 2015 8:53 PM