In this blog, we will be learning how to create a custom theme for SharePoint Online.
Now SharePoint has a Site theming feature for applying custom styles and colors to the site. There are six light and two dark themes available by default. This feature provides the ability to define custom themes and make them available to site owners. Creating a custom theme in SharePoint is a quick and easy way to give your site a unique look and feel.
Currently, no theme is available under the "From your organization" option.
The steps to add a custom theme to SharePoint Online.
Step 1: Create a new color theme in SharePoint Online.
Themes are defined in a JSON schema that stores color settings and related metadata for each theme. Create a new custom theme for SharePoint Online using Microsoft Fluent UI Theme Designer, an online tool. Customize the theme as per your needs and click on the Export theme button. Copy and save the PowerShell output for later use.
Light Theme sample:
Dark Theme sample:
Step 2: Add a custom theme to SharePoint Online using PowerShell
First, connect to the SPO admin site using the Connect-SPOService cmdlet. The custom theme can be added to the SharePoint online tenant using the Add-SPOTheme cmdlet. This cmdlet creates a new theme or updates an existing theme. The color palette settings can be passed as either a hash table or a dictionary.
Execute the command for the light theme.
Now go to Site Settings, gear icon (⚙️) > Change the look > Theme and you'll find the newly added color theme listed under "From your organization".
Execute the same command for the dark theme.
Again, go to Site Settings gear icon (⚙️) > Change the look > Theme and you'll find the new added color theme listed under "From your organization".
When you choose a theme, color settings are instantly applied to the site so that you can see what the selected theme will look like. Select the desired theme, click Save to save your selection, or choose Cancel to revert to your current theme.
Our "Maroon - Light theme" output looks like
Our "Orange - Dark theme" output looks like
Update SP Theme To update an existing theme (to modify some of its color settings, for example), add the -Overwrite flag to the Add-SPOTheme cmdlet.
I hope this will help all of you! 🧲 Feel free to provide feedback.
In this blog, we will be learning how to create list templates under the tab From your organization.
When people in the organization create new lists, they need a template that can be used each time a new list is created.
Site Script
A site script is a collection of actions that SharePoint runs when creating a new site or list. Actions describe changes to apply to the new list, such as creating new columns, adding views, or content types. The actions are specified in a JSON script, which is a list of all actions to apply. When a script runs, SharePoint completes each action in the order listed.
Site Template (previously known as Site Design)
Site templates can be used each time a new site is created to apply a consistent set of actions. Site templates created using custom site scripts will display in the From your organization tab.
A site script is a JSON string that contains the actions to be taken on a site. A site template, on the other hand, is like a container for the site script. You can attach one or more site scripts to a site template, and when you apply the site template, you execute the actions defined in all of the site scripts. It's like the site template is the visible surface part that can group several site scripts together, and the site scripts are all the action underneath.
Currently, no list template is available From your organization tab.
A site template can run multiple scripts. The script IDs are passed in an array, and they run in the order listed.
The former term for site templates may still appear in certain cmdlets and script labels as "site design".
In addition to constructing the JSON by hand, you can also use third-party tools with graphical user interfaces that generate the site scripts for you, such as sitedesigner.io by Mikko Punamäki or Site Template Studio by Yannick Plenevaux.
Exporting an existing list as a site script
In our scenario, we will be exporting an existing list configuration as a site script. First, connect to the SPO admin site using the Connect-SPOServicecmdlet. It can be achieved with the following script. The Get-SPOSiteScriptFromList cmdlet prints out the site script to the console. It can be saved into a variable, or you can copy and save it in a JSON file.
Deploy Site Script and Site Template
To use our site script, we need to deploy it to our tenant. We also need to create a site template where we can attach the deployed site script.
1) Add the site script
Each site script must be registered in SharePoint so that it is available to use. Add a new site script by using the Add-SPOSiteScript cmdlet.
After running the cmdlet, you get a result that lists the site script ID of the added script. Keep track of this ID, as it will be needed later when you create the site template.
2) Create the site template
Next, we will create the site template. Run the Add-SPOListDesign cmdlet to add a new site template. Use the script ID saved above when you added the site script. It can run one or more scripts that have already been added.
The JSON response displays the ID of the new site template. It can be used later on to update or modify the site template.
Get the existing Site Script and Site Template
After we have deployed our site script and site template to our tenant, we can see their properties and information about all other deployed site scripts and templates using the Get-SPOSiteScript and Get-SPOListDesign cmdlet.
Use the new site template
Now that we've added a site script and site template, we can use them to create a new list.
I hope this will help all of you! 🧲 Feel free to provide feedback.
A connector is a proxy or a wrapper around an API that allows the underlying service to talk to Microsoft Power Automate, Microsoft Power Apps, and others.
A connector may provide tables of data or actions.
What are Connectors in PowerApps?
Connectors in PowerApps provide a way to establish a connection to a data source and allow us to use these in our apps.
There are primary two types on connectors.
1). Public Connectors
They’re also known as "built-in connectors" and are further categorized into
a. Standard Connectors: Standard connectors are connectors that are freely available for use. They are available across the entire Microsoft Power Platform, so they can be easily utilized in PowerApps, Power Automate and others. It is included with Power Apps per app plan and per user plan.
b. Premium Connectors: Premium connectors require additional licensing and are only available if you subscription plan.
2). Custom Connectors
Custom connector gives us the ability to use our own connectors. It enables your app to extend its capabilities by calling publicly available or a custom API.
Custom connectors are scoped to individual environments, this means that they are configured in the context of one environment and must be added to each environment to use them, so they are only available to apps and flows within that environment.
In this blog, we will be discussing on how to create a Custom Connector in PowerApps.
Introduction to tomorrow.io API
tomorrow.io is used to provide weather (forecast, maps, monitoring, historical data) reports with the help of an API. In this blog we will be using this API to get the real-time weather report.
3). Scroll down and click on "Realtime Weather" to test the API.
In the Language section: select language as HTTP.
In the Authorization section: API key will be pre-filled. The API Key is being sent as a query parameter in the URL.
In the QUERY PARAMS section: enter the required location parameter value (check below screenshot for location types). Click on "Try It!" button. You will get JSON response data with 200 OK status code.
As its a GET request- you can open the browser and test the API endpoint here also.
Creating a new Custom Connector
Now that we have obtained the API key and tested it successfully, we can proceed further to make our custom connector.
Open the Power Apps and select the environment in which you want to create the custom connector.
Custom connectors are scoped to the environment level.
Scroll down and click on Custom connectors option. You can also pin this.
3). Click on the New custom connector > Create from blank.
4). Enter a meaningful name for the custom connector, and then select Continue.
Parameter
Value
Connector name
Weather Report
Step 1: Update general details
On the General tab, do the following:
Parameter
Description
Value
Icon background image
The background image that is used to display the custom connector icon (in PNG and JPG formats)
Select the custom connector icon of your choice.
Icon background color
The background color that is used to display the custom connector background color (in HEX format)
#64ccc
Description
The description will appear in the custom connector's details.
This connector provides an API for weather reports.
Scheme
The scheme identifies the protocol to be used to access the resource on the Internet. It can be HTTP (without SSL) or HTTPS (with SSL).
HTTPS
Host
The host name identifies the host that holds the resource API.
api.tomorrow.io
Base URL
The base path identifies the specific resource on the host that the web client wants to access.
/
Step 2: Specify authentication type
Choose what type of authentication is implemented in your API.
1). On the Security tab, under Authentication type, select API Key.
2). Under API Key, specify a parameter label, name, and location. Specify a meaningful label, because this is displayed when someone first makes a connection with the custom connector. The parameter name and location must match what the API expects.
Parameter
Value
Parameter label
API key
Parameter name
tomorrow-API-Subscription-Key
Parameter location
Query
Step 3: Create the connector definition
In the definition section, we can define more than one action for our custom connector. Actions determine the operations that users can perform. Actions can be used to read, create, update, or delete resources in the underlying connector.
Create an action
In this blog, we will create an action that calls an API.
1). On the Definition tab, the left pane displays any actions, triggers (for Logic Apps and Power Automate), and references that are defined for the connector. Select New Action.
2). The General area displays information about the action or trigger that's currently selected. Add a summary, description, and operation ID for this action.
Parameter
Value
Summary
Returns a real-time weather report.
Description
This API action allows us to return a real-time weather report by city name, latitude and longitude (decimal degrees), US zip code, and UK postcode.
Operation ID
GetRealtimeWeatherReport
Set the Visibility property to important.
none: displayed normally in the logic app or flow advanced: hidden under another menu internal: hidden from the user important: always shown to the user first
3). The Request area displays information based on the HTTP request for the action. It defines the pre-requirements needed in order to make a request. Select Import from sample.
4). Specify the information necessary to connect to the API, specify the request detail, and then select Import.
5). The Response area displays information based on the HTTP response for the action. Select Add default response.
6). Specify the response body (check testing endpoint API - inside browser), and then select Import.
7). The Validation area displays any issues that are detected in the API definition. Check the status, and then in the upper-right corner of wizard, select Create connector.
8). Newly create custom connector will appear under "Custom connector" like below
Step 4: (Optional) Use custom code support
This step is optional. You can complete the codeless experience of creating your connector by ignoring this step. Custom code can be used to transform request and response payloads.
Step 5: Test the connector
Now that you've created the connector, test it to make sure it's working properly.
1). Create new connection for this custom connector.
2). Enter your API key from the tomorrow.io API, and then click Create.
3). Now edit the custom connector and select the Test tab from the dropdown.
4). On the Test tab, select the connection created in step 1. Enter the location and apikey parameter, and then select Test operation button.
5). The connector calls the API, and you can review the response. If the request is successful, then it will return a JSON response with 200 OK status code.
Using Custom Connector in Canvas App
1) Sign in to Power Apps and choose the environment.
2) Create a new Canvas blank app.
3) Enter an App name "Weather Report - App" and choose the layout for the app.
4) Click "Create" to create a blank canvas app.
5) Once created, the app opens in Power Apps Studio for you to start configuring the app's functionality.
6) In the left menu, select the "Data" option to open the "Data" pane.
7) Select Add data source. Search "Weather Report" and select "Weather Report" our custom connector.
8) Click "Add a connection" or use an existing connection.
9) Now a data source will be added to the app.
10) Rename the default screen, "WeatherReport_Screen" and add Text input, Button and Label control.
The screen will look like the one below.
11) In the button "btn_GetWeatherReport" control, set the OnSelect property as below. The button control will get call the custom API.
GetRealtimeWeatherReport is the operation ID or the function to get weather report based on the city.
