Posts tagged SharePoint 2013 Hosting belgium

SharePoint Hosting – Set Full Width to Modern SharePoint Online Team Site

Dec 2nd

Posted by Peter in European SharePoint 2013 Hosting

Modern SharePoint Team site (Group connected as well non-Group created) by default shows a left navigation with pre-configured links, as well we can add our own customized links.

In this article, we will explore how we can turn off the left navigation and make the Team site to work in full width.

Left Navigation

The left navigation helps to consolidate the important links at one place throughout the site navigation, but also takes significant amount of space on the screen.

Make the Team site as full width

Follow the below steps to turn off the left navigation and make use of Team site as full width:

Navigate to site settings.
Under Look and Feel, click Navigation Elements.
Deselect Enable Quick Launch.

Click OK.

PowerShell

If you need to carry out this on multiple SharePoint Team sites, as well you want to make this functionality available as a step of your site provisioning, this can be achieved with PowerShell.

PnP PowerShell

# Connect to SharePoint
Connect-PnPOnline -Url $siteURL

# Disable the Quick Launch
$web = Get-PnPWeb
$web.QuickLaunchEnabled = $false
$web.Update()

# Connect to SharePoint

Connect-PnPOnline -Url $siteURL

# Disable the Quick Launch

$web = Get-PnPWeb

$web.QuickLaunchEnabled = $false

$web.Update()

The End Result

Once the quick launch is disabled, the Team site will be turned in to full width site experience.

Summary

Modern SharePoint Team site (Group connected as well non-Group created) by default shows a left navigation. It takes significant amount of space on the screen. With simple configuration of quick launch, it can be tuned off to make the Team site available in full width for use.

SharePoint Hosting – Simple Accordion For SPFx With JavaScript

Nov 25th

Posted by Peter in European SharePoint 2013 Hosting

Accordion is a very frequent requirement in SPFx web parts. There are various npm packages available for implementing this.

In this article, we will explore implementing expand / collapse functionality in SPFx using plain JavaScript. Although the implementation is with plain JavaScript, it can also be used with React based implementation.

Develop SPFx Solution

Let us develop the SPFx web part as shown below,

In the solution, create a model at src\webparts\expandCollapse\IAnnouncementItem.ts to represent an Announcement item.

export interface IAnnouncementItem {
title: string;
description: string;
}

export interface IAnnouncementItem {

title: string;

description: string;

}

In the web part, implement a method to read announcements. For simplicity, I am using mock method to return dummy announcements.

public getAnnouncementItems(): IAnnouncementItem[] {
const announcementItems: IAnnouncementItem[] = [
{ title: "What is a product key?", description: "A product key is a 25-character code that comes with a Microsoft Office product. The product key allows you to install and activate the Office product on your PC." },
{ title: "Where do I find my Office product key?", description: "Your product key is 25 characters and is found in different locations depending on how you acquired your Office product." },
{ title: "How long does it take to download?", description: "Download times vary by location, internet connection speed and the size of the Office product you are downloading. It is recommended only high-speed broadband connections are used to download your file(s)." },
{ title: "What happens after I download?", description: "After the download has completed, go to the location that you saved the file at and double click on the new icon to start the installation." },
{ title: "What if the download stops or is interrupted before it is complete?", description: "If you become disconnected while files are being downloaded through your web browser, reconnect to the internet and retry your download." }
];

return announcementItems;
}

public getAnnouncementItems(): IAnnouncementItem[] {

const announcementItems: IAnnouncementItem[] = [

{ title: "What is a product key?", description: "A product key is a 25-character code that comes with a Microsoft Office product. The product key allows you to install and activate the Office product on your PC." },

{ title: "Where do I find my Office product key?", description: "Your product key is 25 characters and is found in different locations depending on how you acquired your Office product." },

{ title: "How long does it take to download?", description: "Download times vary by location, internet connection speed and the size of the Office product you are downloading. It is recommended only high-speed broadband connections are used to download your file(s)." },

{ title: "What happens after I download?", description: "After the download has completed, go to the location that you saved the file at and double click on the new icon to start the installation." },

{ title: "What if the download stops or is interrupted before it is complete?", description: "If you become disconnected while files are being downloaded through your web browser, reconnect to the internet and retry your download." }

];

return announcementItems;

}

The above FAQs are taken from Microsoft Frequently Asked Questions page.

Update the render method to display the announcements.

public render(): void {
    this.enableExpandCollapse();

    this.domElement.innerHTML = `
      <div class="${styles.expandCollapse}">
        <div class="${styles.container}">
          <div class="${styles.row}">
            <div class="${styles.justifyContentEnd}">
              <a href="#" id="linkExpandAll" style="display: none" rel="noreferrer" onClick="${() => { this.expandAll(); }}">Expand all</a>
              <a href="#" id="linkCollapseAll" rel="noreferrer" onClick="${() => { this.collapseAll(); }}">Collapse all</a>
            </div>

            <div id="tblAnnouncementDetails">
            </div>

          </div>
        </div>
      </div>`;

    this.getAnnouncementDetails();
    this._setButtonEventHandlers();
}

public render(): void {

this.enableExpandCollapse();

this.domElement.innerHTML = `

<a href="#" id="linkExpandAll" style="display: none" rel="noreferrer" onClick="${() => { this.expandAll(); }}">Expand all</a>

<a href="#" id="linkCollapseAll" rel="noreferrer" onClick="${() => { this.collapseAll(); }}">Collapse all</a>

</div>

</div>

</div>`;

this.getAnnouncementDetails();

this._setButtonEventHandlers();

}

In the enableExpandCollapse method, we use setInterval to evaluate the existence of an element with className collapsible and add click event to an individual button to expand/collapse a specific div next to it.

private enableExpandCollapse() {
    const existCondition = setInterval(() => {
      if (document.getElementsByClassName("collapsible").length > 0) {
        const coll = document.getElementsByClassName("collapsible");

        for (let i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            const content = this.parentElement.nextElementSibling;
            if (content.style.display === "block" || content.style.display === "") {
              this.textContent = "▼";
              content.style.display = "none";
            } else {
              this.textContent = "▲";
              content.style.display = "block";
            }
          });
        }
        clearInterval(existCondition);
      }
    }, 100);
}

private enableExpandCollapse() {

const existCondition = setInterval(() => {

if (document.getElementsByClassName("collapsible").length > 0) {

const coll = document.getElementsByClassName("collapsible");

for (let i = 0; i < coll.length; i++) {

coll[i].addEventListener("click", function () {

this.classList.toggle("active");

const content = this.parentElement.nextElementSibling;

if (content.style.display === "block" || content.style.display === "") {

this.textContent = "▼";

content.style.display = "none";

} else {

this.textContent = "▲";

content.style.display = "block";

}

});

}

clearInterval(existCondition);

}

}, 100);

}

The getAnnouncementDetails method will return the HTML structure for announcements to render.

private getAnnouncementDetails() {
    const announcementItems: IAnnouncementItem[] = this.getAnnouncementItems();

    let html: string = "<div>";

    announcementItems.forEach((item: IAnnouncementItem) => {
      html += `
      <div class="${styles.announcementItem}">
        <div class="${styles.titleRow}">
          <label>${item.title}</label>
          <button type="button" class="${styles.buttonExpandCollapse} collapsible"}>▲</button>
        </div>
        <div class="${styles.descriptionRow}">
          <label>${item.description}</label>
        </div>
      </div>`;
    });

    html += '</div>';

    const announcementContainer: Element = this.domElement.querySelector('#tblAnnouncementDetails');
    announcementContainer.innerHTML = html;
}

private getAnnouncementDetails() {

const announcementItems: IAnnouncementItem[] = this.getAnnouncementItems();

let html: string = "<div>";

announcementItems.forEach((item: IAnnouncementItem) => {

html += `

<label>${item.title}</label>

</div>

<label>${item.description}</label>

</div>

</div>`;

});

html += '</div>';

const announcementContainer: Element = this.domElement.querySelector('#tblAnnouncementDetails');

announcementContainer.innerHTML = html;

}

The _setButtonEventHandlers method will register the event handlers for Expand/collapse buttons,

<span class="token keyword keyword-private">private</span> <span class="token function">_setButtonEventHandlers</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword keyword-void">void</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-const">const</span> webPart<span class="token operator">:</span> <span class="token maybe-class-name">ExpandCollapseWebPart</span> <span class="token operator">=</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">;</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">domElement</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">'#linkExpandAll'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span> webPart<span class="token punctuation">.</span><span class="token method function property-access">expandAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">domElement</span><span class="token punctuation">.</span><span class="token method function property-access">querySelector</span><span class="token punctuation">(</span><span class="token string">'#linkCollapseAll'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span> webPart<span class="token punctuation">.</span><span class="token method function property-access">collapseAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

private _setButtonEventHandlers(): void {

const webPart: ExpandCollapseWebPart = this;

this.domElement.querySelector('#linkExpandAll').addEventListener('click', () => { webPart.expandAll(); });

this.domElement.querySelector('#linkCollapseAll').addEventListener('click', () => { webPart.collapseAll(); });

}

In the expandAll method, we are expanding all the divs using CSS style of display block, as clicked.

In the collapseAll method, we are collapsing all the divs using CSS style of display none, as clicked.

Accordion in an action

When deployed, the web part works as below:

Summary

A common requirement of expand/collapse (Accordion) functionality can be implemented using plain JavaScript in SPFx. As well, there are various third party npm packages available for this functionality.

SharePoint Hosting – Add Adaptive Card To Your Viva Connection Dashboard

Nov 17th

Posted by Peter in European SharePoint 2013 Hosting

Let’s take a deep dive into setting up of Viva Connection Dashboard and how you can add out of the box adaptive card extension to your site.

Set up Viva connection Dashboard

To be able to view a Viva Connection Dashboard into your communication site, follow these steps,

Create a SharePoint Home Site; If you don’t have a SharePoint Home Site, Navigate to SharePoint Admin Centre > Settings.

In Fig 1.1 you will see SharePoint Home Site option, click on the same, a panel will open where you will be asked to add your communication site URL which you want to convert to Home Site.

Note: Make sure you have global left navigation enabled in your communication site

Voila, in few minutes your communication site will convert to Home site. Isn’t this amazing!

Now, navigate to your Home site, and let’s look into a Home site settings where you will see the option to set up your Viva connections Dashboard as shown in Fig 1.2

Click on Set up Viva Connections and click on create a Dashboard button. Once you create a Dashboard you will be landed on a screen as shown in Fig 1.3.

From Fig 1.3, notice that by default mobile screen view is selected, you can change it to desktop to preview.

Now, let’s start by adding an adaptive card to your dashboard, I hope you guys are excited too…

Click on Add a Card button and explore all the out of the box cards available for you. Just like shown in Fig 1.4, You will see Approvals, Assigned Tasks, Shifts, Teams app, Web Link all these cards available to you.

Now let’s explore each card one by one, Let’s start by adding an Approvals card, As shown in Fig 1.5, the user will be able to keep a track of all the approval requests right here in one place, User can select the card type from small, medium, or large option and also target this to a specific audience by adding a user/group in the property pane.

Let’s add the Assigned Tasks card, As shown in Fig 1.6, This card will display a preview of top Planner tasks from “Assigned to me” list in the Tasks app in Teams. Also, the Open button will redirect to the assigned task

Let’s add a Web Link card, As shown in Fig 1.9 you can add the link, title, description and can add thumbnail and card images also you can target it to specific audience.

P.S. Don’t forget to publish your dashboard page once you are done.

I hope all the Viva enthusiasts would have enjoyed knowing about how you can set up Viva connection dashboard and add cards to your dashboard.

Stay tuned for my upcoming articles on Viva series.

SharePoint Hosting – Add Content Editor Web Part To SharePoint Online

Nov 11th

Posted by Peter in European SharePoint 2013 Hosting

This article shows the steps to add the Content Editor web part to SharePoint online site.

OfficeUI Grid

Content editor web part is used to display your rich content and custom functionality.

Prerequisites create a trail Office 365 E3 license account.

Just follow the below steps,

Step 1

Go to the SharePoint admin center –> Active Sites, click create,

Step 2

Select “Other Options”

Step 3

Choose More Template from the dropdown

Step 4

Fill in the Title, web site address and add your admin name if your the admin add your name

Step 5

Now go to site contents –> Site Pages –> New –> Web part page

Step 6

Give your page a name, select the layout and destination as site pages

Step 7

Add Content Editor Web part

Step 8

Add your HTML file from Site Assets to the web part

Once added click “Stop Editing”, your page is ready!!!

SharePoint Folder Operations Demo Using PnP JS In React Based SPFx Webpart

Nov 4th

Posted by Peter in Other Related Post

In this article, we will learn how to perform operations like add, copy, move, and delete folders using the PnP library in the SPFx web part. PnPJs is an awesome library that providers wrappers around SharePoint REST API so that we as the developer do not have to write repetitive code and also worry about details on how to pass headers, data, etc. It is not only limited to SharePoint but we can also use it to call graph and office 365 API. As this library comes as an npm package, it can be used for any node js and javascript-based projects. Today we will use it in the context of the SharePoint Framework.

Let’s start by creating an SPFx web part. Go to the command prompt and directory where you want to create your SPFx solution.

Use the below options to create a new SPFx solution. (we will be using React framework, just because it is really cool).

Once the solution is created you can open the project in your favorite editor(mine is VS code).

Now let’s install pnp library, use the below command in the node js command prompt.

For the sake of simplicity, we won’t be using any fancy UI ..we will just create buttons and perform different operations on click of the buttons.

Let’s start making code changes, go-to editor.

Pass SharePoint Context to React component

1. Open src\webparts\foldersdemo\components\IFoldersdemoProps.ts

Create context properties to hold SharePoint context.

2. Go to src\webparts\foldersdemo\FoldersdemoWebPart.ts

<span class="token keyword keyword-public">public</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword keyword-void">void</span> <span class="token punctuation">{</span>
   <span class="token keyword keyword-const">const</span> element<span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">ReactElement</span></span><span class="token operator">&lt;</span><span class="token maybe-class-name">IFoldersdemoProps</span><span class="token operator">&gt;</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
     Foldersdemo<span class="token punctuation">,</span>
     <span class="token punctuation">{</span>
       description<span class="token operator">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">properties</span><span class="token punctuation">.</span><span class="token property-access">description</span><span class="token punctuation">,</span>
       context<span class="token operator">:</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">context</span>
     <span class="token punctuation">}</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
   ReactDom<span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">domElement</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>

public render(): void {

const element: React.ReactElement<IFoldersdemoProps> = React.createElement(

Foldersdemo,

{

description: this.properties.description,

context:this.context

}

);

ReactDom.render(element, this.domElement);

}

Setup PnP in React Component

1. Go to src\webparts\foldersdemo\components\Foldersdemo.tsx

Import library, you can do selective import but for this demo, we will be loading all presets.

2. In the same file, let’s initialize the PnP SP object with context. Add a constructor in your react class.

<span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span><span class="token maybe-class-name">IFoldersdemoProps</span><span class="token punctuation">,</span>state<span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
   sp<span class="token punctuation">.</span><span class="token method function property-access">setup</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
     spfxContext<span class="token operator">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">context</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>

constructor (props:IFoldersdemoProps,state:{}) {

super(props);

sp.setup({

spfxContext: this.context

});

}

Add required logic in React component

1. Go to src\webparts\foldersdemo\components\Foldersdemo.tsx

Replace render method with below code,

2. Now let’s add the required method which will be called on respective buttons.

So we are done with changes, let’s test it…run ‘gulp serve’ and open SharePoint workbench.aspx

Let us first see how the library is looking before doing any operations.

Click on Create Folders,

Let us see the results of Create Folders operation. It has created 4 folders.

Click on Rename Folder.

This will rename the folder as specified.

Click on Copy Folder.

The folder has been copied to the destination.

Click on the Move folder.

We can see the folder has been moved.

Conclusion

In this article, we have explored the below concepts.

SPFx React-based web part
Using PnPJS library in SPFx web part
CRUD operations on folders in SharePoint using PnP JS

SharePoint Hosting – How To Fetch Items From SharePoint List To PowerApps Gallery, Calculator?

Oct 7th

Posted by Peter in Other Related Post

In this article, I’m going to demonstrate how Sharepoint List Records are fetched to the PowerApps Gallery Control and, in the gallery we’ll be calculating some values as per the requirement, then those calculated values will be updated again to the List.

STEP 1 – Creating a List

List Name: Calculation
ItemName: (Single Line Text)
Quantity: (Number)
UnitPrice:(Number)
Total:(Number)

Create the List as per the above specifications.

Enter some dummy values to the ItemName, Quantity, UnitPrice Columns.

STEP 2 – Working with Power Apps gallery

Go to PowerApps and create a blank canvas app and name it as per the Project Title.

Add a blank vertical Gallery to the Screen and you can rename it as per your need.

Add the Data Source from the SharePoint List to The Gallery Items.

Select the Gallery control and choose the pencil icon to edit the require fields with context to List Data Source.

Put some Controls and change their properties as follows,

Put a Label Control- Set Text Property-ThisItem.ItemName
Put a Label Control- Set Text Property-ThisItem.Quantity
Put a Label Control- Set Text property-ThisItem.UnitPrice
Put a Text Input Control- Set Default Property:ThisItem.Quantity*ThisItem.UnitPrice

STEP 3 – Function To Update List Items

Add a Button Control to the Screen and rename it as you need.

Write the following functions on button On Select Property,

<span class="token function"><span class="token maybe-class-name">ForAll</span></span><span class="token punctuation">(</span><span class="token function"><span class="token maybe-class-name">RenameColumns</span></span><span class="token punctuation">(</span><span class="token maybe-class-name">Gallery1</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">AllItems</span></span><span class="token punctuation">,</span> <span class="token string">"ID"</span><span class="token punctuation">,</span> <span class="token string">"CID"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function"><span class="token maybe-class-name">Patch</span></span><span class="token punctuation">(</span><span class="token maybe-class-name">Calculation</span><span class="token punctuation">,</span> <span class="token function"><span class="token maybe-class-name">LookUp</span></span><span class="token punctuation">(</span><span class="token maybe-class-name">Calculation</span><span class="token punctuation">,</span> <span class="token constant">ID</span> <span class="token operator">=</span> <span class="token constant">CID</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token maybe-class-name">ItemName</span><span class="token operator">:</span> lblName<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">,</span>
    <span class="token maybe-class-name">Quantity</span><span class="token operator">:</span> <span class="token function"><span class="token maybe-class-name">Value</span></span><span class="token punctuation">(</span>lblQty<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token maybe-class-name">UnitPrice</span><span class="token operator">:</span> <span class="token function"><span class="token maybe-class-name">Value</span></span><span class="token punctuation">(</span>lblUP<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token maybe-class-name">Total</span><span class="token operator">:</span> <span class="token function"><span class="token maybe-class-name">Value</span></span><span class="token punctuation">(</span>txtTotal<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

ForAll(RenameColumns(Gallery1.AllItems, "ID", "CID"), Patch(Calculation, LookUp(Calculation, ID = CID), {

ItemName: lblName.Text,

Quantity: Value(lblQty.Text),

UnitPrice: Value(lblUP.Text),

Total: Value(txtTotal.Text)

}));

STEP 4 – Save & Run the Application

Save the Application and run it. The Application runs successfully and will update all the Calculated items from the Gallery to the Share Point List you are working with.

STEP 5 – Checking The List Data Source

Go to Your Share Point List and refresh it. You will see that all the Total columns are updated.

In the above article we successfully did the calculation and updating of calculated Values to the SharePoint List as per the requirements.

Posts tagged SharePoint 2013 Hosting belgium

SharePoint Hosting – Set Full Width to Modern SharePoint Online Team Site

Left Navigation

Make the Team site as full width

PowerShell

The End Result

Summary

SharePoint Hosting – Simple Accordion For SPFx With JavaScript

Develop SPFx Solution

Accordion in an action

Summary

SharePoint Hosting – Add Adaptive Card To Your Viva Connection Dashboard

Set up Viva connection Dashboard

SharePoint Hosting – Add Content Editor Web Part To SharePoint Online

SharePoint Folder Operations Demo Using PnP JS In React Based SPFx Webpart

Pass SharePoint Context to React component

Setup PnP in React Component

Add required logic in React component

Conclusion

SharePoint Hosting – How To Fetch Items From SharePoint List To PowerApps Gallery, Calculator?

BLOGROLL

Featured On

Posts tagged SharePoint 2013 Hosting belgium

SharePoint Hosting – Set Full Width to Modern SharePoint Online Team Site

Left Navigation

Make the Team site as full width

PowerShell

The End Result

Summary

SharePoint Hosting – Simple Accordion For SPFx With JavaScript

Develop SPFx Solution

Accordion in an action

Summary

SharePoint Hosting – Add Adaptive Card To Your Viva Connection Dashboard

Set up Viva connection Dashboard

SharePoint Hosting – Add Content Editor Web Part To SharePoint Online

SharePoint Folder Operations Demo Using PnP JS In React Based SPFx Webpart

Pass SharePoint Context to React component

Setup PnP in React Component

Add required logic in React component

Conclusion

SharePoint Hosting – How To Fetch Items From SharePoint List To PowerApps Gallery, Calculator?

BLOGROLL

Featured On

Tags