The Weather Component

The weather component is found in the top-left of the We.Retail Journal app. It displays the current weather of a defined location, pulling weather data dynamically.

Using the Weather Widget

screen_shot_2018-06-08at143224

When authoring content of the SPA in the SPA Editor, the weather component appears as any other AEM component, complete with a toolbar, and is editable.

screen_shot_2018-06-08at143304

The city can be updated in a dialog just like any other AEM component.

screen_shot_2018-06-08at143446

The change is persisted and the component updates itself automatically with new weather data.

screen_shot_2018-06-08at143524

Weather Component Implementation

The weather component is based on a publicly available React component, called React Open Weather. It has been adapted to work as a component within the We.Retail Journal sample SPA application.

The following are snippets of the NPM documentation of the usage of the React Open Weather component.

screen_shot_2018-06-08at144723 screen_shot_2018-06-08at144215

Reviewing the code of the customized weather component ( Weather.js) in the We.Retail Journal application:

  • Line 16: The React Open Weather widget is loaded as required.

  • Line 46: The MapTo function relates this React component to a corresponding AEM component so that it can be edited in the SPA Editor.

  • Lines 22-29: The EditConfig is defined, checking if the city has been populated and defining the value if empty.

  • Lines 31-44: The Weather component extends the Component class and provides the required data as defined in the NPM usage documentation for the React Open Weather component and renders the component.

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2018 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     https://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import React, {Component} from 'react';
import ReactWeather from 'react-open-weather';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Weather.css');

const WeatherEditConfig = {

    emptyLabel: 'Weather',

    isEmpty: function() {
        return !this.props || !this.props.cq_model || !this.props.cq_model.city || this.props.cq_model.city.trim().length < 1;
    }
};

class Weather extends Component {

    render() {
        let apiKey = "12345678901234567890";
        let city;

        if (this.props.cq_model) {
            city = this.props.cq_model.city;
            return <ReactWeather key={'react-weather' + Date.now()} forecast="today" apikey={apiKey} type="city" city={city} />
        }

        return null;
    }
}

MapTo('we-retail-journal/global/components/weather')(Weather, WeatherEditConfig);

Although a back-end component must already exist, the front-end developer can use the React Open Weather component in the We.Retail Journal SPA with little coding.

Next Step

For further information about developing SPAs for AEM see the article Developing SPAs for AEM.

Experience Manager


Adobe Experience Manager Sites: Top Innovations

Online | Session | General Audience

Digital interactions are the most critical touchpoints in a customer journey. Brands need to maximize the impact of content to drive...

Tue, Mar 18, 2:00 PM PDT (9:00 PM UTC)

Register

The True Cost of a Failed Implementation

Online | Session | General Audience

A failed implementation isn’t just an inconvenience — it costs real revenue. Poor execution and misaligned tools disrupt pipelines,...

Wed, Mar 19, 2:00 PM PDT (9:00 PM UTC)

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more