4.15 Custom widget render() method behavior

Question

I'm not sure I understand how render() method works exactly and how to add & render dynamic content to widget's HTML/template...

1) First of all - for some reason each click on the map I loaded - triggers the render() method about 7 times. Any idea why? what's the lifecycle of this method? (I've attached a GIF showing that each click on map is calling the redner() method 7 times).

2) Regarding adding dynamic HTML - let's say that I have an initial HTML I render thru render() method, and I want to add additional "h1" html element on a button click. What is the right way to do it? I just want to append HTML elements to the initial render.

In javascript API version 3 - we would just access the DOM using dojo and add whatever we want. How is it done in this latest version 4?

Thanks.

widget.gif

ShayL · Answer

Hi Yaniv,

The new Javascript API is based on React & TypeScript.

I don't know about your background in programming, but assuming you do have some, consider the Render function to be the main method / entry point of a React component.

Once the code is "compiled", the output of HTML is done through the Render function and it's always required.

The HTML tags you see inside the Render method is not really HTML tags.. it's JSX, which is also part of the way you code in React.

I highly suggest you find some quick and basic videos on how to work with React, to understand better about the technology. It will make much more sense and be less "painful" to learn by experimenting

These are only the building blocks, but the more complex stuff comes when learning about state management of components when working with React - and that's where the magic of React comes in place. Online tutorials will teach you much better about it than me.

Shay.

BenRomlein · Answer

Not an expert, but I'll offer some thoughts:

1.) render is called each time a renderable property changes. I can't see in your gif if you have any other renderable properties, or if there are other methods that are setting emphasized elsewhere in the app. EDIT: I'm getting similar behavior from my app with no renderable properties defined. There must be some other trigger to call render() that I'm unaware of.

2.) I think the answer here is to have a separate method defined to render your new element, then set up conditions in the main render method for when to call the separate method. Your button could toggle a renderable property, triggering a call to render, which could then check the property and call your new method if true.

If you've accomplished this differently, please share. I'm also trying to wrap my head around rendering the view. If you haven't already checked them out, the videos that Matt and Franco have been doing at the last few dev summits are quite helpful: https://www.youtube.com/watch?v=XKmZLx56Jl0&list=PLaPDDLTCmy4Ys8vfmC7DbX3FHSsyosvh7