Url Button Widget Version 2.5 - 08/10/2017

178102
61
07-29-2016 09:27 AM
Labels (1)

Url Button Widget Version 2.5 - 08/10/2017

This is just a simple widget to open a URL. The url can be any valid URL Address. The difference between this and just adding a link in WAB, is that this is a button and not a text link. Some have asked for this ability, so here it is.

Live Preview Site

Previous Version

Labels (1)
Attachments
Comments

Robert,

Thanks again for creating this widget. I was wondering if you could customize this widget to grab the lat/long (decimal degrees) of the web app (where the URL button widget resides) and add it to the end of the URL address (http://<some web address>/?ll=39.028034,-84.722987) found inside the URL button widget? The resulting URL address could then open a new web app at the same location.  I would think this would be useful to a lot of people because they could go from one web app to the next and not have to zoom or pan to the same location each time.

John,

  I am not sure that this is something that needs to be added to the widget as the parameter would have to be configurable (i.e the ll=) and then where do I draw the line when people ask for more and more parameters. I can guide you through make such code changes but am unlikely to add to the core widget.

I understand... It is better to keep the core widget simple and basic, whenever possible. I would love to work with you on making the necessary code changes, but I'm new to customizing widgets, so I'm not sure how much help I would be.

John,

   Don't really need any help from you, just need to know you are willing to make the changes locally.

John,

   So in the Widgets.js open function replace the whole function with this one:

onOpen: function(){
if(!this.isOpening){
this.isOpening = true;
//RJS ADD
var ll;
if(this.config.addCenterParameter){
ll = this.map.extent.getCenter().getLatitude() + "," + this.map.extent.getCenter().getLongitude();
}
//RJS End Add
//RJS Edit
if(ll){
window.open(this.config.LinkUrl + "?ll=" + ll, "_blank");
}else{
window.open(this.config.LinkUrl, "_blank");
}
//RJS End Edit
setTimeout(lang.hitch(this, function(){
this.isOpening = false;
WidgetManager.getInstance().closeWidget(this);
}), 300);
}
}

and then in the config_blahblah.json add the addCenterParameter

{
"LinkUrl": "https://dojotoolkit.org/",
"addCenterParameter": true
}

Robert,

I replaced/added the necessary code and everything works great! It's exactly what I had in mind. Thank you and hope you have a great weekend!

Hello, Would this open a FTP link or only http/https?

Thanks

Ben

Ben,

   It should work fine with an ftp url

Will this widget work in WAB DE 2.0?

Yes it should 

Robert, I need a quick refresher. It's been awhile. I added the UrlButton Widget to my apps folder under Widgets.

Two issues:

1) The URL Button auto-launches to the URL from www.esri.com everytime I open the App for editing. 

2) The icon is empty. I kept the original name. 

Here is the code I modified from the app config.json (not the UrlButton config):

{
"position": {
"left": 305,
"top": 45,
"relativeTo": "map"
},
"placeholderIndex": 1,
"id": "_11",
"name": "Measurement",
"label": "Measurement",
"version": "2.0.1",
"icon": "configs\\Measurement\\icon_Measurement.png",
"uri": "widgets/Measurement/Widget",
"config": "configs/Measurement/config_Measurement.json"
},
{
"position": {
"left": 355,
"top": 95,
"relativeTo": "map"
},
"placeholderIndex": 1,
"id": "_12",
"name": "UrlButton",
"label": "Url Button",
"version": "2.1",
"icon": "configs\\UrlButton\\icon.png",
"uri": "widgets/UrlButton/Widget",
"config": "configs/UrlButton/config.json"
},

Tim,

  It sounds like you are try to manually add the widget and configure it. You should be following these steps:

  1. Add any new custom widget to the client\stemapp\widgets folder.
  2. Restart WAB
  3. Open the app in WAB to configure and add widgets in the widgets tab.
  4. You will see the new custom widget you added in step 1 now.
  5. Add the widget and the widgets settings dialog will appear.
  6. configure the new widget to your liking.
  7. Save your app
  8. Done.

Thanks, Robert!

I have now documented these steps so I do not forget the next time I need to do this! 

Hi Robert. This comment has been very helpful to me, thank you. I've been able to follow the steps here and get the widget working. Do you think it would be much work to further customize this widget to get the XY from a click event on the map rather than the center point of the map? I'm trying to figure out how to do it with the Javascript API but any guidance would be greatly appreciated. 

Benjamin,

     I would say this widget is not the greatest starting point for such a widget. Some of the code (i.e. opening a new window with the maps center lat lon) would be good to grab, but you really need to start a new widget and just add the very simple functionality you are looking for. I would recommend looking at the jimu drawBox dijit for drawing a point on the map and then get the graphics geometry to extract the lat and lon to send to your url.

Ok I will try that, thanks Robert. 

Hi Robert. I have been attempting to implement what you described here but unfortunately have been unsuccessful. I am quite unfamiliar with the custom widget organization and to add to that I have been unable to find documentation for the drawbox dijit or how to implement it. Could you provide any more guidance on this front, perhaps some documentation that I must be missing?

Ben,

   There is limited documentation as WAB is not an SDK or API. YOur best bet fro leaning how to use the DrawBox dijit is to look at code in other widgets that use it. There are many OTB and custom widget that do so like the measurement, query, eSearch, Identify, etc. As far as basic widget organization the WAB Dev guides give you most of what you need there. Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developer... 

Hi Robert, I have been able to alter an existing custom widget to the point where I have the functionality using the drawbox dijit to draw a point on the map, however I am at a complete loss as to how I get the coordinates of that point. Once I have those I think it will be fairly trivial for me to complete the widget. It has been more difficult than I expected, I was completely unfamiliar with the dojo framework and AMD javascript so I'm really struggling to get the functionality even though it seems like it should be simple. I can't even figure out how to pass the drawbox object functionality into another function after using it in the postCreate function. I feel like I must be approaching this wrong. 

Ben,

   I would be best if you start a new thread for this attach what you have so far for review and comments.

Hi Robert, my apologies, I just created a new thread. 

Hi Robert. Do you keep the previous versions of your widgets? I have some app where I am not ready to convert them to the 2.5 version.

Thanks.

So you need the 2.4 version?

Yes, please. Thank you. In the future, I will save the versions.

Previous version link added to the main document.

Just wanted to let you know that the live site is not operational

Strange I just tested a couple of times and it came up just fine.  Try doing a Ctrl + F5.

Hello Robert, Thanks for this!

Just one question: I am getting into Web AppBuilder so I would need some help with this.

I really need to use your widget and I would like to know how to put it on my widget´s library and to make it work... I know this question can look silly but I am not an expert haha

hello, is it possible to call a url when clicking on the button without opening a new page?So that the user stay on the same page(web app)

No, That would have to be done in custom widget code. I will respond to one of your other three posts with an answer.

Hello,

I have download your custom widget Url Button above.

I have copy the folder into C:\arcgis-web-appbuilder-2.6\WebAppBuilderForArcGIS\client\stemapp\widgets, then i close the startup.bat and reopen the webapp but unfortunatly i cannot see the new widget in the list where i choose a widget.

I am new and need help please,

Thank you

I have also noticed that all the other widgets folder contain an html file Widget.html and in the Url Button widget there is no Widget.html file ,maybe this is the reason.\

Waiting for your help

Thank you so much

Caroline,

   There is no Widget.hrml because this widget has no user interface it just opens a url when the button is clicked. Extracting the UrlButton folder to your C:\arcgis-web-appbuilder-2.6\WebAppBuilderForArcGIS\client\stemapp\widgets should have worked just fine. That is the only step for installing this widget. Then when you create a new app or edit an existing app you will see the "URL Link Button" option near the bottom of your widget choices dialog.

Thank you Robert,

Now i changed your Url Button code so that when clicking on the button  it will call a webservice.

I changed the widget.js code to:


define([
'dojo/_base/declare',
'dojo/_base/lang',
'jimu/BaseWidget',
'jimu/WidgetManager',
'esri/request'
],
function (
declare,
lang,
BaseWidget,
WidgetManager,
esriRequest) {
var clazz = declare([BaseWidget], {

name: 'UrlButton',
baseClass: 'widget-urlbutton',
isOpening: false,

onOpen: function () {
if (!this.isOpening) {
this.isOpening = true;

//window.open(this.config.LinkUrl, "_blank");

var requestHandle = esriRequest({
url: "http://tapat4/restservice/api/values",
content: { f: "json" },
handleAs: "json",
callbackParamName: "callback"
});
requestHandle.then(
function (response) {

alert('success');
//console.log("Success: ");

}, function (error) {
alert('error:'+error.message);
// console.log("Error: ", error.message);
});


//RJS End Edit
setTimeout(lang.hitch(this, function () {
this.isOpening = false;
WidgetManager.getInstance().closeWidget(this);
}), 300);
} //if this opening open
} //on open
}); //clazz declare
return clazz;
}); //function

When running the app after refresh and clicking on the url button i get the message alert that it can not load the rest service.

Do you have any idea what i am doing wrong?And how can i check the error?

Cause when i run in explorer the url of the webservice : http://tapat4/restservice/api/values i get a json file with the response!

Thank you so much for your help

My restful Service look like this:

public class ValuesController : ApiController
{
// GET api/values
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}

}

Is the service a RESTfull web service or a SOAP based web service?

 I make a test with a restfull service and I succeed make it works by removing the parameter :

callbackParamName: "callback

Is it possible to make it works with a soap service ?

Hi Robert,

Thanks for the URL button widget, my organization is finding it very useful. We are trying to group two url button widgets together inside of the Foldable Theme and are realizing that a panel appears when clicking on the link button. For now, I have modified the url buttons Widget.js to programmatically close the panel but ideally the panel would never open. Do you have any suggestions on how to stop the panel from opening?  

Thanks,

Mark

Mark,

  No the panel that appears is a result of you grouping the widgets. When grouped a panel is presented to allow the user to chose which grouped widget they want to activate.

Thanks for the reply Robert. I want the initial panel to appear so the user can select a url button but after selecting one of them I was hoping to restrict the panel from opening. Just wanted to make sure that we were talking about the same thing. If so, thanks for your response and I will continue closing the panel through the url buttons Widget.js.

Thanks,

Mark

Mark,

  So you changed the manifest.json to inPanel: true in order to get the widgets to group right? Thus there is the issue.

Thank you so  much Robert!

Do you know how can i change the url button code and add a loading icon that will be shown when clicking on the button on will be hidden when the service will return a response?

Caroline,

  Since you are wanting this widget to do something it is not developed for please start a new thread to ask your questions about modifying the widget. I like to keep the discussions here about the widget and its use.

Thanks Robert for the URL button widget.

I was able to use this, but instead of using the url  - "https://www.w3schools.com/"  - I am using a login webpage url, where it prompts to enter the username and password.

I am looking to store the username and password in the config.json file, and when I click on the URL button widget - it should open the login page of and should signin with the username and password provided in the config file.

Could you please provide your thoughts on it.

Thanks

Sri 

Sri,

   I am not sure that is possible. This widget is very simply opening a url. Unless the page it is opening is capable of take a username and password parameter in the url (which is supper insecure) then you can not do it.

Thanks Robert for taking time and providing information about it.

Hello Robert Scheitlin, GISP

I am trying to use the url widget code inside a 2.10 WAB widget and it's working fine, the only thing that differs from your demo site is that, when I click the widget, other widget windows are being closed, while on your site they stay open (eg: if I open the legend then click one url button, the legend stays open)

Do you know if there is something to fix or it's a WAB problem? I was single click widget buttons that does not close other windows, but just execute the code.

Thank you and best regards

Francesco

Francesco,

   What theme are you using and where in that theme do you have the widget placed? Is it in the header controller or on screen widget placeholder?

Version history
Last update:
‎07-29-2016 09:27 AM
Updated by: