How use SharePoint theme color in SCSS in SPFx

Introduction:

In this blog, we will learn how can we use the color of current applied theme in SharePoint in SPFx web parts or SPFx extension.

Steps:

Step 1) Go to the SCSS file of your web part or extension.

Step 2) Now at the top of the SCSS file, declare the variables and assign the theme color as a value to this variable as given below:

 $themePrimary: '[theme:themePrimary, default:#dc1928]';  
 $themeSecondary: '[theme:themeSecondary, default:#2488d8]';  
 $themeTertiary: "[theme:themeTertiary, default:#69afe5]";  
 $themeLight: "[theme:themeLight, default:#b3d6f2]";  
 $themeAccent: "[theme:themeAccent, default:inherit]";  
 $themeDark: "[theme:themeDark, default:#005a9e]";  
 $themeDarkAlt: "[theme:themeDarkAlt, default:#106ebe]";  
 $themeDarker: "[theme:themeDarker, default:#004578]";  

Here we are creating the variables for all the colors of the theme, so we can use directly the variables.

Step 3) Now, add the class name in which you want to apply the color of the theme and in this class name we can use the variable names we have declared at the top of SCSS file.

 .menuButton{  
   background-color: $themePrimary;  
 }  

Step 4) Now, when you use menuButton class in your HTML it will apply the primary color of your selected theme as the background color.

Alternate Approach:

If you do not want to use variables, you can also apply theme color direct to the class as given below:

 .menuButton{  
   background-color: "[theme:themePrimary, default:#dc1928]";  
 }  

Conclusion:

This is now we can use theme color in SCSS. Hope this blog will be helpful for you!

If you have any questions you can reach out our SharePoint Consulting team here.

Close and Logout Power Apps using Exit() Function in Power Apps

Overview:

Sometimes, there is a requirement, wherein we need to close our Power Apps and Logout the user from the App’s context. How can we achieve this requirement? 

Power Apps provide one Power Fx formula to achieve this which is the EXIT() function! So, now Let’s explore this feature in detail!!

We have created one Power Apps with two buttons. First, let’s check the syntax!

Syntax: Exit([Signout]) 

• Here Signout is an optional parameter that accepts a Boolean value. 
• If we pass true, then, it exits from the app and signs out the user!

Let’s get started!

Step 1:

Add button and add the following code without optional parameter.

Step 2:

Add button and pass signout parameter as true. 

This will log out to the end-user and prompt them to Sign In again!

Conclusion:

Hope, this small Power Apps trick helps you!!

If you have any questions you can reach out our SharePoint Consulting team here.

How to use Fluent UI Icons in SharePoint Framework (SPFx)?

Introduction:

In this blog, we will learn how we can use Fluent UI Icons in SPFx Webparts or SPFx Extensions. Here are the steps to use Fluent UI icons:

Steps:

Step 1) To use the Fluent UI icons, first we need to install the package for Fluent UI using the below command. 

 npm i @fluentui/react  

Step 2) Now, we need to import Icons and Iconsprops as given below:

 import { Icon } from '@fluentui/react/lib/Icon';  

Step 3) Now, declare the global variable and assign the icon as given in the below code. Here we are using a global variable so we can use this icon multiple times.

 const HomeIcon = () => <Icon iconName="Home" />;  

Step 4) Now, in the render method we can render the icon as given below:

 <HomeIcon></HomeIcon>  

Here is the full code snippet:

 import * as React from 'react';  
 import { IAlertsProps } from './IAlertsProps';  
 import styles from './Alerts.module.scss';  
 import { escape } from '@microsoft/sp-lodash-subset';  
 import { Icon } from "@fluentui/react";  
 const HomeIcon = () => <Icon iconName="Home" />;  
 export default class Alerts extends React.Component<IAlertsProps, {}> {  
  public render(): React.ReactElement<IAlertsProps> {  
   return (  
    <div className={styles.Alerts}>  
     <HomeIcon></HomeIcon>      
    </div>  
   );  
  }  
 }  

It will display the Home Icon in your web part.

Conclusion:

This is how we can use Fluent UI Icons in SPFx Webparts or Extension. Hope this helps!

If you have any questions you can reach out our SharePoint Consulting team here.