Simple Button available in JSAPI?

153
2
Jump to solution
04-22-2019 11:40 AM
Highlighted
Regular Contributor

I'm looking for the simplest way to add a button to my view UI when developing with the JS API. By simple I mean really just a UI elements that I can hookup to any necessary callback. For example, I might want to include the search widget to search for a record to select/highlight in the map, and only when the extra simple button is clicked, do I get a popup or a buffer for my feature. I'm surprised there isn't something like a "Simple Button" widget. Or have I missed it? I see an Action Button for use inside a Popup, which I think will be helpful in another context. But more than I need.

Currently, I'm having to follow the advice here to do:

<div id="mapDiv">  
<div id="button">
<button data-dojo-type="dijit/form/Button" id='simpBtn'>My Simple Button</button>
</div>
</div>

But the result doesn't blend right in with the style of my other UI elements. This approach here didn't seem to work for me. My button just gets covered up by map despite the z-index of 100.

I've been taking my time before getting into the custom widgets using Typescript. Has the time come to take that approach.

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
Frequent Contributor

I'm not exactly sure I follow the use case, but you can add any DOM element to a View UI in 4x.

So you could do something like this

var btn = document.createElement('button');
btn.innerText = 'Open Popup for Search';
view.ui.add(btn, 'top-right');
btn.addEventListener('click', () => {
if (searchResult) {
view.popup.open({
features: [searchResult],
location: searchResult.geometry
});
}
});

Here is a sample that kind of does what you described.

JS Bin - Collaborative JavaScript Debugging 

You would need to style the button as desired, is all.

View solution in original post

2 Replies
Highlighted
Frequent Contributor

I'm not exactly sure I follow the use case, but you can add any DOM element to a View UI in 4x.

So you could do something like this

var btn = document.createElement('button');
btn.innerText = 'Open Popup for Search';
view.ui.add(btn, 'top-right');
btn.addEventListener('click', () => {
if (searchResult) {
view.popup.open({
features: [searchResult],
location: searchResult.geometry
});
}
});

Here is a sample that kind of does what you described.

JS Bin - Collaborative JavaScript Debugging 

You would need to style the button as desired, is all.

View solution in original post

Highlighted
Regular Contributor

Thanks, Rene. That's great. Somehow, I didn't realize that I could use the

view.ui.add()

syntax to integrate a regular HTML dom element into my view. Learning one post at a time here. 

Reply
0 Kudos