locked
Lightswitch HTML Client: Javascript - equivalent to $(element) in _created RRS feed

  • Question

  • Hello.

    Is there an equivalent to the $(element) and contentItem from a _postRender for an _execute or _created method?

    Tuesday, July 22, 2014 9:37 PM

Answers

  • I believe you can get the DOM element from a contentItem's ._view property like so:

    contentItem._view._container[0]

    To change a color on change of another property you'd want to use dataBind.

     In _postRender of the contentItem that you want to change color:

        contentItem.dataBind("screen.myEntity.tblLanguageItem", function (newValue) {
            if(newValue) {
                $(element).parent().css('color', 'green'); 
            }       
        });

    Where contentItem.screen.tblLanguageItem resolves to the property on which you'd like to listen for change and newValue is it's value after change.

    HTH,

    Josh



    • Edited by joshbooker Wednesday, July 23, 2014 9:34 PM
    • Proposed as answer by joshbooker Wednesday, July 23, 2014 9:34 PM
    • Marked as answer by Ingo67LS Wednesday, July 23, 2014 9:35 PM
    Wednesday, July 23, 2014 7:30 PM
  • Then I wanted to Change the color to green instead, if the field (which is a linked property named "tblLanguageItem"{sorry but I do not know if it is called linked property}). Therefore I added a Change listener to the _postRender Method but without success.

    ...if the field...what?  I assume you want to listen for change on a property called "tblLanguageItem"  If that is correct, then use the binding path in my code ("screen.tblLanguageItem" or "screen.YourEntity.tblLanguageItem") rather than the "screen.TAB_SpracheItem"  in your code.

    What does OP mean?

    It means 'Original Poster'  You are the original poster in this thread so 'OP' refers to you.

    • Marked as answer by Ingo67LS Wednesday, July 23, 2014 9:28 PM
    Wednesday, July 23, 2014 9:19 PM

All replies

  • You can use code like: contentItem = screen.findContentItem("OrderDate") to get a specific content item.

    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Tuesday, July 22, 2014 9:57 PM
  • screen.findContentItem("ScreenProperty") does not return a jQuery object as $(element) does.
    Tuesday, July 22, 2014 10:53 PM
  • If you want the element you can just use $(element), right?

    I was just showing how you get to that "LightSwitch data".

    For example:

    myapp.AddEditCustomer.beforeApplyChanges = function (screen) {
        if (screen.Customer.ContactName.indexOf('!') != -1) {
            screen.findContentItem("ContactName").validationResults = [
            new msls.ValidationResult(
            screen.Customer.details.properties.ContactName,
            "Contact Name cannot contain the character '!'.")
            ];
            return false;
        }
    };


    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com


    Tuesday, July 22, 2014 11:02 PM
  • The OP asked how to get the equivalent of the $(element) from a method other than _postRender or _render, which screen.findContentItem will unfortunately not do. 

    The OP doesn't mention what is needed to be done with the $(element) object however.  I was pointing out that screen.findContentItem will not give access to the DOM element for the screen property, but as you point out it will give access to the data properties of its contentItem.  Since screen.findContentItem does not return a jQuery object, one can't manipulate the DOM element using jQuery methods either.  Hence, screen.findContentItem could not be considered the equivalent of $(element), but possibly the OP will have what is needed from that approach.

    Tuesday, July 22, 2014 11:21 PM
  • Hello ADefwebserver, hello LittleBobbyTables.

    Thank you for the quick response.

    I tried to mark a field as required as described under:

    http://msdn.microsoft.com/en-us/library/jj733572.aspx

    So I put this

    $(element).parent().css('color', 'red'); $(element).parent().find("label")[0].innerHTML += " *"

    to the _postRender of the desired field and it works fine. Then I wanted to Change the color to green instead, if the field (which is a linked property named "tblLanguageItem"{sorry but I do not know if it is called linked property}). Therefore I added a Change listener to the _postRender Method but without success. I thought it might run if I place it under the _created Method.

    What does OP mean?

    Thanks again, Ingo

    Wednesday, July 23, 2014 6:54 AM
  • I believe you can get the DOM element from a contentItem's ._view property like so:

    contentItem._view._container[0]

    To change a color on change of another property you'd want to use dataBind.

     In _postRender of the contentItem that you want to change color:

        contentItem.dataBind("screen.myEntity.tblLanguageItem", function (newValue) {
            if(newValue) {
                $(element).parent().css('color', 'green'); 
            }       
        });

    Where contentItem.screen.tblLanguageItem resolves to the property on which you'd like to listen for change and newValue is it's value after change.

    HTH,

    Josh



    • Edited by joshbooker Wednesday, July 23, 2014 9:34 PM
    • Proposed as answer by joshbooker Wednesday, July 23, 2014 9:34 PM
    • Marked as answer by Ingo67LS Wednesday, July 23, 2014 9:35 PM
    Wednesday, July 23, 2014 7:30 PM
  • Hello Josh.

    Thank you for your reply. I could not get this working. I tried as followed:

    myapp.IncidentsEdit.TAB_SpracheItem_postRender = function (element, contentItem) { //var entity = contentItem.value; //function refresh() { // $(element).parent().css('color', 'orange'); $(element).parent().find("label")[0].innerHTML += " *"; // try { // if (entity !== null) { // $(element).parent().css('color', 'lightgreen'); $(element).parent().find("label")[0].innerHTML += " *"; // } // } // catch (e) { // } //} //entity.addChangeListener("screen.TAB_SpracheItem", refresh); //refresh(); contentItem.dataBind("screen.TAB_SpracheItem", function (newValue) { if (newValue) { $(element).parent().css('color', 'lightgreen'); $(element).parent().find("label")[0].innerHTML += " *"; } }); };

    What is wrong with my code? I also tried another field but this does not work either. 


    • Edited by Ingo67LS Wednesday, July 23, 2014 9:08 PM err
    • Marked as answer by Ingo67LS Wednesday, July 23, 2014 9:29 PM
    • Unmarked as answer by Ingo67LS Wednesday, July 23, 2014 9:35 PM
    Wednesday, July 23, 2014 9:07 PM
  • Then I wanted to Change the color to green instead, if the field (which is a linked property named "tblLanguageItem"{sorry but I do not know if it is called linked property}). Therefore I added a Change listener to the _postRender Method but without success.

    ...if the field...what?  I assume you want to listen for change on a property called "tblLanguageItem"  If that is correct, then use the binding path in my code ("screen.tblLanguageItem" or "screen.YourEntity.tblLanguageItem") rather than the "screen.TAB_SpracheItem"  in your code.

    What does OP mean?

    It means 'Original Poster'  You are the original poster in this thread so 'OP' refers to you.

    • Marked as answer by Ingo67LS Wednesday, July 23, 2014 9:28 PM
    Wednesday, July 23, 2014 9:19 PM
  • Ahhrrrg. Thats it. Thank you Josh.

    I missed the "MyEntity". Sorry!

    Now it works like I wanted.

    Thanks again.

    Ingo

    Wednesday, July 23, 2014 9:28 PM