HTML DOM - please generate ID's in the elements

Question

Hello, if you look at the generated DOM in a typical LS HTML page, none of

the tags have any ID attributes, even though the elements are named in the

LS Designer.  This makes it not convenient to access elements of our

choosing in our JS code, e.g. I want to alter the text of an element from

the listener of another element.

 

Please consider adding ID (or Name) attributes for all elements that exist

in the Designer.

 

Thanks,

David

 

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com

Answer 1

Sounds like a good idea David. You should submit a "suggestion" on the Visual Studio UserVoice site, so it gets into the system & other people can vote on it.

Don't forget to share a link to your submission here in this thread.

---

Yann Duran      - Co-Author of Pro Visual Studio LightSwitch 2011      - Author of the  LightSwitch Central Blog FREE Download: Luminous Tools for LightSwitch (a Visual Studio productivity extension for LightSwitch)

Please click "Mark as Answer", if someone's reply answers your question. Please click "Vote as Helpful", if you find someone's reply helpful.

By doing this you'll help others to find answers faster.

Answer 2

Thanks Yann. 

Add Id's to the HTML element tags generated in the LightSwitch HTML Client

 

-- David

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com

Answer 3

You're welcome David.

It seems like a good idea (quite logical really), so I voted for it as well.

---

Yann Duran      - Co-Author of Pro Visual Studio LightSwitch 2011      - Author of the  LightSwitch Central Blog FREE Download: Luminous Tools for LightSwitch (a Visual Studio extension to enhance your LightSwitch productivity)

Please click "Mark as Answer", if someone's reply answers your question. Please click "Vote as Helpful", if you find someone's reply helpful.

By doing this you'll help others to find answers faster.

Answer 4

Assuming the LS team did add ID tags to the DOM elements, what would be potentially gained over the pre-programmed _postrender method of attaching to the individual DOM element created by Lightswitch, or even the _render method ability to insert your own DOM elements (which you can tag yourself).

I'm very new to Lightswitch and HTML/JS, and I could be way off here, but doesn't the <yourControl>_postrender (element, contentItem) method basically do what getElementByID("tag").innerHTML() does?

Answer 5

The only time the DOM element can be gotten is either in the _render or _postrender, since “element” is a parameter.  I want to access DOM elements from other places besides that.  We could write e.g. _postrender for all interesting elements and store the parameters as global variables for use later, but why do that?  With jQuery, we are expecting to be able to access $(“#my_element”) for each element in the DOM whereever we want.

 

-- David

 

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com

Answer 6

Hi,

A couple of issues we encountered trying to generate the ID for HTML elements using the content item name:

- A screen can be shown multiple times. In jQuery Mobile, each screen is just a <DIV> in the HTML page. So if the ID is simply the content item's name now we have elements with duplicated ID.

- List View's Row template: Let's say you customize the List View's Row template to display Customer Name and Company Name. On the Screen Designer you only see two content items named CustomerName and CompanyName. But at run time there are multiple <LI> elements containing two <SPAN> elements for Customer Name and Company Name. If we just apply the content item name for the ID, now we have elements with duplicated ID on the same screen.

Appending number to the IDs will not help you in your custom code. Inventing and implementing a complex scheme to ID the element uniquely may affect the performance of the application and is prone to errors.

May be we can use some data- attributes to indicate the content item name?

Thanks for your feedbacks,
Huy Nguyen

Answer 7

Hi Huy,

 

Perhaps this is too simple, but I would expect the ID to correspond with whatever the “element” parameter is of the _render() or post_render().

 

Thanks,

David

 

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com

Answer 8

Hi David,

The "element" parameter passed into render or post render method is not a string representing an ID. As you noted LightSwitch does not generate an ID, so it would not work if we pass into your code a string to be used as ID in jQuery :)

The "element" parameter is a JavaScript object, inheriting from HTMLElement object. You can call $(element) and get back a jQuery object because jQuery $() method accepts different types of parameters - String, HTMLElement object, etc. In fact if you don't want to use jQuery, you can do a lot of thing with the "elemen" object itself using its properties and methods.

Best regards,
Huy Nguyen

Answer 9

Yes, I was referring to your question on how to disambiguate the elements with the same ID (Name) in the designer.  However you use to disambiguate the function names of the _render() or post_render() should be good enough.

 

For example, I created a function called myapp.ActiveJobReport.TotalW2Jobs_postRender.  The element parameter passed into this function could have an ID of “ActiveJobReport_TotalW2Jobs” (the same as in the name of the function).

 

Thanks,

David

 

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com

Answer 10

Hi David,

Using this ID "ActiveJobReport_TotalW2Jobs" will not work if for some reasons you have two ActiveJobReport screens in your navigation stack. Then we will end up with two HTML elements representing TotalW2Jobs content item with the same ID.

myapp.ActiveJobReport.TotalW2Jobs work for code because it's a method definition and you can have multiple instances of the same class.

Best regards,
Huy Nguyen

Answer 11

Hi Huy,

 

In that case, would it be possible to add a getElement() method to screen, so anywhere I could call

 

  var $element = screen.getElement(“ActiveJobReport_TotalW2Jobs”).

 

 

since “screen” always refers to the active screen instance.

 

Thanks,

David

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com

Answer 12

David,

I don't think that Huy's saying that there'd be a problem retrieving an element by your desired ID, just that it could end up in the HTML file more than once, which with my VERY limited knowledge of anything Java, I don't think it "legal" to have multiple ID's like that.

Of course, I could also be wrong. :-)

---

Yann Duran      - Co-Author of Pro Visual Studio LightSwitch 2011      - Author of the  LightSwitch Central Blog FREE Download: Luminous Tools for LightSwitch (a Visual Studio productivity extension for LightSwitch)

Click Mark as Answer, if someone's reply answers your question Click  Vote as Helpful, if someone's reply is helpful

By doing this you'll help everyone find answers faster.

Answer 13

Yann, if they implemented screen.getElement(), then that eliminates the need to put ID’s in the HTML tags.

 

A related question:  we are supposed to get ContentItems using e.g.

 

     screen.findContentItem(“AsOfDate”) 

 

where “AsOfDate” is the name as it appears in the designer.  But I find that

 

    screen.AsOfDate

 

works just as well!  Even if it does not appear in IntelliSense!  What’s going on?

 

Thanks,

David

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com

Answer 14

Hi David,

The screen object represents a View Model object in the M-VM-V pattern. So it's kind of break the pattern if the View Model has knowledge about the View. But I agree that to be able to query for a Content Item's View object by doing something like this $(".MyContentItemName", $.mobile.activePage) is useful.

For your related question:

• screen.AsOfDate is a screen property (appears on the Screen Member area - the tree view on the left).
• screen.findContentItem("AsOfDate") is a content item that's defined in the screen's content item tree (main area of the screen designer).

They should be two different objects.

Also, a quick comment on using global objects to store the elements you're interested in: If you only need to access the elements within context of one screen, thanks to JavaScript way, you can just add the element on the screen object itself. For example:

myapp.AddEditCustomer.Details_postRender = function (element, contentItem) {
    contentItem.screen._$Details = $(element);
};

Best regards,
Huy Nguyen

Answer 15

Yes, I like your $(".MyContentItemName", $.mobile.activePage).  :-)

 

I’m fuzzy about how a screen property relates to a content item then.  I can change the value of what is shown in the Date Picker by saying:

  screen.AsOfDate = new Date();  // set date picker to current date

 

I haven’t tried

  screen.findContentItem(“AsOfDate”) = new Date();

 

and now am unsure of what I should code based on my intent?

 

Nice trick of dynamically adding the element to the screen._$Details!  :-)  I could just add it to a name of my choosing, though, e.g. screen.$AsOfDateElement?

 

Thanks,

David

 

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com

Answer 16

> The screen object represents a View Model object in the M-VM-V pattern. So it's kind of break the pattern if the View Model has knowledge about the View.

 

Thinking about this some more, if the VM can correctly access the model, e.g.

  screen.findContentItem()

 

why is it not also correct for it to access the view, e.g.

  scren.findElement()?

 

Thanks,

David

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com

Answer 17

Hi David,

I’m fuzzy about how a screen property relates to a content item then.

A screen property will be translated into a property on the screen object at runtime. So screen.AsOfDate at runtime is a Date object.

A content item, on the other hand, is an object that supports binding between the value of screen.AsOfDate and the control that displays the value of screen.AsOfDate. We need the content item object because screen.AsOfDate by itself cannot describe additional things like 'visible', 'font size', etc. All of those details come from the content item.

So if you want to change the value of the control displaying AsOfDate on the screen, you can simply change screen.AsOfDate = new Date(...). But if you want to hide/show the control displaying AsOfDate on the screen, you can do screen.findContentItem("AsOfDate").isVisible = false.

Also screen.findContentItem(“AsOfDate”) = new Date(); will not work because you cannot re-assign function return value like that :)

Nice trick of dynamically adding the element to the screen._$Details!  :-)  I could just add it to a name of my choosing, though, e.g. screen.$AsOfDateElement?

It's JavaScript, you can name it to your heart's content as long as you don't override some other critical properties already there on the screen object :)

why is it not also correct for it to access the view

Content Item is considered a View Model, same level as Screen Object. Also in M-VM-V you are allowed to access the object lower than you. So VM can access M, not V.

Best regards,
Huy Nguyen

Answer 18

Angie,

Proposing a reply, then marking it as the answer some hours later makes a mockery of proposing. Please stop.

Let's not start this "marking answers" again, just for the sake of closing threads.

---

Yann Duran      - Co-Author of Pro Visual Studio LightSwitch 2011      - Author of the  LightSwitch Central Blog FREE Download: Luminous Tools for LightSwitch (a Visual Studio productivity extension for LightSwitch)

Click Mark as Answer, if someone's reply answers your question Click  Vote as Helpful, if someone's reply is helpful

By doing this you'll help everyone find answers faster.

Answer 19

@David,

Thanks for taking the time to mark the replies that you consider the answer to your question. :-)

---

Yann Duran      - Co-Author of Pro Visual Studio LightSwitch 2011      - Author of the  LightSwitch Central Blog FREE Download: Luminous Tools for LightSwitch (a Visual Studio productivity extension for LightSwitch)

Click Mark as Answer, if someone's reply answers your question Click  Vote as Helpful, if someone's reply is helpful

By doing this you'll help everyone find answers faster.

Answer 20

Sure Yann.  One drawback to using the Bridge is the marked answers are not shown, so I don’t mark the answers until I periodically use the web browser!  :-)

 

-- David

 

---

Efficiently read and post to forums with newsreaders: http://communitybridge.codeplex.com