Get data to display weather using HTML web resource

(0) Share

Report

Posted on by Community Member

Hi experts,

I created an HTML web resource to display the weather for the entered city. My HTML has a text box and a button where the user can enter the city.

However, I want my code to pick up the value of the city from address1_city attribute and display the information dynamically. How can I change my code to make it work?

<!DOCTYPE html>
<html>
<head>
	<title>Weather API</title>
	<script 
		src="code.jquery.com/jquery-3.2.1.min.js"
		integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
		crossorigin="anonymous"></script>
	</head>
	<body>
		<input id="city"></input>
		<button id="getWeatherForecast">Get Weather</button>
		<div id="showWeatherForecast"></div>

		<script type="text/javascript">
			$(document).ready(function() {
				$("#getWeatherForecast").click(function(){
					var city = $("#city").val();
					var key = 'xxxxxxxxxxxxxxxxxxxxxxxxxx';

					$.ajax({
						url: 'api.openweathermap.org/.../weather',
						dataType: 'json',
						type: 'GET',
						data: {q: city, appid: key, units: 'metric'},

						success: function(data){ 
							var wf = '';
							$.each(data.weather, function(index, val){
								wf += '<p><b>' + data.name + "<b><img src=openweathermap.org/.../w"+ val.icon + ".png></p>" +
								data.main.temp + '&deg;C' + ' | ' + val.main + ", " +
								val.description
							});
							$("#showWeatherForecast").html(wf);
						}
					})
				});
			});
		</script>
	</body>
	</html>

Thanks,

Jon

*This post is locked for comments

I have the same question (0)

All responses (12)

Answers (3)

Shaminderpal Singh 1,565 on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon,

Do you want to pick the value from crm form or from your input element on web resource?

-Shaminder

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Shaminder,

Thank you for your reply once again!

I want to pick the value from CRM address1_city field:

The code takes user input from text box and displays weather information onclick() however I want none of that. I want to pick the value from CRM and show weather information onLoad().

Thanks,

Jon

Was this reply helpful? Yes No
Suggested answer

gdas 50,091 Moderator on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon ,

Could you please try with this -

var city = window.parent.Xrm.Page.getAttribute("address1_city ").getValue();

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report
RE: Get data to display weather using HTML web resource

Hi Goutam,

Thank you for your reply.

I made the change and removed the input text box tag and button tag. But the web resource is blank when I load the page.

<!DOCTYPE html> <html> <head> <title>Weather API</title> <script src="code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> </head> <body> <div id="showWeatherForecast"></div> <script type="text/javascript"> $(document).ready(function() { $("#getWeatherForecast").click(function(){ var city = window.parent.Xrm.Page.getAttribute("address1_city").getValue(); var key = 'xxxxxxxxxxxxxxxxxxxxxxxxxx'; $.ajax({ url: 'api.openweathermap.org/.../weather', dataType: 'json', type: 'GET', data: {q: city, appid: key, units: 'metric'}, success: function(data){ var wf = ''; $.each(data.weather, function(index, val){ wf += '<p><b>' + data.name + "<b><img src=openweathermap.org/.../w"+ val.icon + ".png></p>" + data.main.temp + '°C' + ' | ' + val.main + ", " + val.description }); $("#showWeatherForecast").html(wf); } }) }); }); </script> </body> </html>

Was this reply helpful? Yes No
gdas 50,091 Moderator on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon ,

Are you getting any error ? please debug the code and let me know are you getting the city value or not . And in addition also share error if you are getting any.

Was this reply helpful? Yes No
Verified answer

Shaminderpal Singh 1,565 on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon

Use the below one:

<!DOCTYPE html>

<html>

<head>

<title>Weather API</title>

<script src="..//WebResources/new_jquery" ></script>//Add a webresource with jquery code and give its reference here

</head>

<body>

<div id="showWeatherForecast"></div>

<script type="text/javascript">

$(function() {

var city = window.parent.Xrm.Page.getAttribute('address1_city').getValue();

console.log('city', city)

var key = '5c9c57526e87675e29e6dc4028ccb393';

$.ajax({

url: 'https://api.openweathermap.org/data/2.5/weather',

dataType: 'json',

type: 'GET',

data: {q: city, appid: key, units: 'metric'},

success: function(data){

var wf = '';

$.each(data.weather, function(index, val){

wf += '<p><b>' + data.name + "<b><img src=openweathermap.org/.../w"+ val.icon + ".png></p>" +

data.main.temp + '°C' + ' | ' + val.main + ", " +

val.description

});

$("#showWeatherForecast").html(wf);

},

error: function error(data) {

console.log(data);

}

})

});

</script>

</body>

</html>

I have tested it also,go the result as below.

Note-Make sure to add jquery reference by creating a new web resource

-Shaminder

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Shaminder,

I added the jqeury reference from the SDK as shown below but I'm still getting message as following:

Did I use the correct jquery file? Or do I am have to do it some other way? I'm sorry I'm a beginner at the technical side of CRM.

Thanks,

Jon

Was this reply helpful? Yes No
Verified answer

gdas 50,091 Moderator on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon ,

try to use Jquery_1.9.1.min

Was this reply helpful? Yes No
Verified answer

Shaminderpal Singh 1,565 on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Hi Jon,

Remove this line from code //Add a webresource with jquery code and give its reference here

It was an indicator for you to replace the webresource name :)

<script src="..//WebResources/{Specify the schema of jquery file which you created}" >

use the one which is named as jquery1.9.min.js

-Shaminder

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report

RE: Get data to display weather using HTML web resource

Thank you so much Shaminder & Goutam for helping me with this task.

Just another thing I was wondering is would you know why the icon isnt displaying the image? In my simple html page it shows the icon:

Thanks,

Jon

Was this reply helpful? Yes No