BizPortals Weather
BizPortals Weather displays the weather forecast for various cities, allowing users to view the weather of one city at a time by selecting it from the location dropdown menu in the header of the web part.
- These cities are defined by Portal Administrators and Site Owners in the Configure section.
- Change a city: You can view the weather for any city listed in the location dropdown at the top of the web part. To view the weather for a different city, click the dropdown menu and choose your desired location.
- Switch between Celsius and Fahrenheit: You can toggle the temperature scale between Celsius and Fahrenheit by clicking on the numeric temperature value displayed in the web part.
Note: At least one city must be selected for the web part to display data
2. Web part Configuration
2.1 Overview
You can change the title, add a description of the web part, change the layout, set the web part height, apply custom theme, show/hide the web part title and other configurations.
Note – You must have at least the site owner’s permission to configure this web part.
Follow the steps mentioned below,
- Navigate to the top right corner of the page and click the edit button.
- Then click on the edit web part icon as shown in the below image.
- After clicking on the edit web part icon, the property panel will be shown for this web part on the right side.
2.2 Web Part Data Properties
2.2.1 Web Part Title
It is the name that shows in the header of the web part that summarizes the web part’s function.
2.2.2 Web Part Description
This is the brief information related to the web part which can highlight what is the functionality of the web part.
2.2.3 API url
This field displays the default value of the site from which we are fetching weather information.
2.2.4 API key
Do not modify this field unless you intend to change the source of the weather API. If the key is incorrect, the Bizportals Weather functionality will not work.
To obtain the key, visit https://www.weatherapi.com/ and register for the service. Once you log in to your account, a key will be displayed on the screen. Copy this key and paste it into the API Key field.
2.2.5 Configure cities
Click on “+” icon to add new cities. as shown in the below screen.
City name: Specify name of the city.
External url: You can utilize any third-party service to show the weather for this city. Simply get their URL (web address) and paste it. (The user will see an option in the web part to redirect to that external URL for more information)
Latitude and Longitude: These are the coordinates of the location used by satellites to find the city and display its weather information. You can obtain these by clicking the ‘Click Here’ link provided in the next row.
Temperature unit: Choose unit of measurement as Celsius and Fahrenheit.
Forecast: Select the number of days to display the forecast. If you select zero in the dropdown, the web part will show only the current weather conditions. If you select one, it will show the weather for the next day only.
Today’s forecast: If you select this checkbox, the web part will display the weather conditions for the current day plus the number of days chosen in the previous field.
Set default: When you select this checkbox, the city becomes a preselected option in the web part. The weather for this city will continue to be displayed to the user unless they choose other options from the location dropdown.
2.2.6 Show Border
To display a border around the web part, users should activate the toggle button in the property pane. Once enabled, a 1pt border will be applied to the web part.
2.3 Web Part Layout Settings
2.3.1 Select header layout
Users can change the web part header layout. There are several to choose from. One option allows you to set an image in the web part title. When you select this option in the panel layout, a URL field will automatically appear next to the panel layout option. Users can enter an image URL to display on the panel. If you leave the field blank and click ‘Apply,’ it will use a default image.
When you select last panel layout user should be able to configure logo for web part header, the size for that image will be (175*38)
2.3.2 Select Web Part Layout
Users can select the web part layout by selecting from the available options.
2.3.3 Web Part Height (px)
Users can set the web part height by sliding the range bar according to the requirement.
2.3.4 Customize Theme
Users can enable this option to personalize the web part’s visual appearance by applying a custom background theme. This is achieved by entering a JSON (JavaScript Object Notation) code into the theme editor as shown in below image. The JSON configuration includes parameters such as text color, background color, and other styling options to tailor the look and feel of the web part according to individual preferences.
- Click” Learn more” to visit the Fluent UI Theme Designer website.
- Customize your theme by selecting your preferred primary, text, and background colors. Once satisfied, click Export theme.
- To apply the theme settings, copy the JSON code and paste it into the designated area of the Theme Editor (Customize theme field). Click Save.
2.3.5 Display Web Part Title
Enable this toggle button if you want to display the title in the header of the web part. Keep this toggle button in disabled state if you want to hide the title in the header of the web part.
2.4 Web Part Feedback Settings
Feedback subject: This determines the subject line of the email sent when users submit any feedback related to the web part.
Email To: This field designates the recipient’s email address to whom feedback-related emails will be sent. When a user submits feedback through the web part, an email notification is generated and directed to the email address specified in this field.
Note: Feedback recipient must have access to this site collection.
2.5 BizPortals 365 Version Info
Here user can see the version information.
3. Web part Functionality
Users can add multiple cities from the “Configure Cities” section and view them on the web part display, as illustrated in the image below.
Choose City: Users can select a city from the web part display as depicted in the image below.
Note: It is necessary to set one city as the default.