Posts tagged trick SharePoint 2013 Hosting

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 Hosting – Copy Navigation Using PowerShell

Aug 5th

Posted by Peter in European SharePoint 2013 Hosting

In this blog, we have discussed the copy of the navigation menu from one site to another site using a PowerShell script in SharePoint online. There are 3 types of Navigation in SharePoint Online,

Site Navigation (Local Navigation)
Global Navigation
Hub Site (Tenant) Navigation).

Site Navigation

Site Navigation is also known as the Quick Launch Navigation or Local navigation. A user can access anything related to this site within one click by using this navigation. If you have a Team Site, it has navigation on the left side of the site. If you have a communication site the Quick Launch is on the top of the site.

Global Navigation (Tenant Navigation)

In Global Navigation users can access to any site in the same site collection.

Hub Navigation

Hub site navigation appears at the top of the site and it is global navigation. One would create a link in the sites that are part of the hub site.

In this blog, we will learn how to copy the navigations from one site to another using PowerShell PnP.

Copy hub Navigation

Follow the below code to copy Hub navigation from one site to another site.

Param(
    [Parameter(ParameterSetName = "Inputparameter", Position = 1, Mandatory = $True)]
    [String] $sourceHubsiteUrl,
    [Parameter(ParameterSetName = "Inputparameter", Position = 2, Mandatory = $True)]
    [String] $destinationHubsiteUrl)
Add - Type - AssemblyName PresentationFramework
Function Copy - NavigationToplink($sourceHubsiteUrl, $destinationHubsiteUrl) {
    $getTopNavs = Get - NavigationToplink - Hubsite $sourceHubsiteUrl
    Add - NavigationToplink - Topnavs $getTopNavs - Hubsite $destinationHubsiteUrl
}
Function Get - NavigationToplink($hubsite, $Credentials) {
    [System.Windows.MessageBox]::Show("Please provide credentials for login to the ($hubsite) Site")
    Connect - PnPOnline - Url $hubsite - UseWebLogin
    $topNavs = Get - PnPNavigationNode - Location TopNavigationBar | Select Title, Url
    Disconnect - PnPOnline
    return $topNavs
}
Function Add - NavigationToplink($topNavs, $hubsite) {
    [System.Windows.MessageBox]::Show("Please provide credentials for login to the ($hubsite) Site")
    Connect - PnPOnline - Url $hubsite - UseWebLogin
    foreach($topNav in $topNavs) {
        if ($TopNav.Url) {
            $navUrl = $topNav.Url
            $navTitle = $topNav.Title
            Add - PnPNavigationNode - Location TopNavigationBar - Title $navTitle - Url $navUrl
        }
    }
}
Copy - NavigationToplink - SourceHubsiteUrl $sourceHubsiteUrl - DestinationHubsiteUrl $destinationHubsiteUrl

Param(

[Parameter(ParameterSetName = "Inputparameter", Position = 1, Mandatory = $True)]

[String] $sourceHubsiteUrl,

[Parameter(ParameterSetName = "Inputparameter", Position = 2, Mandatory = $True)]

[String] $destinationHubsiteUrl)

Add - Type - AssemblyName PresentationFramework

Function Copy - NavigationToplink($sourceHubsiteUrl, $destinationHubsiteUrl) {

$getTopNavs = Get - NavigationToplink - Hubsite $sourceHubsiteUrl

Add - NavigationToplink - Topnavs $getTopNavs - Hubsite $destinationHubsiteUrl

}

Function Get - NavigationToplink($hubsite, $Credentials) {

[System.Windows.MessageBox]::Show("Please provide credentials for login to the ($hubsite) Site")

Connect - PnPOnline - Url $hubsite - UseWebLogin

$topNavs = Get - PnPNavigationNode - Location TopNavigationBar | Select Title, Url

Disconnect - PnPOnline

return $topNavs

}

Function Add - NavigationToplink($topNavs, $hubsite) {

[System.Windows.MessageBox]::Show("Please provide credentials for login to the ($hubsite) Site")

Connect - PnPOnline - Url $hubsite - UseWebLogin

foreach($topNav in $topNavs) {

if ($TopNav.Url) {

$navUrl = $topNav.Url

$navTitle = $topNav.Title

Add - PnPNavigationNode - Location TopNavigationBar - Title $navTitle - Url $navUrl

}

Copy - NavigationToplink - SourceHubsiteUrl $sourceHubsiteUrl - DestinationHubsiteUrl $destinationHubsiteUrl

Source site image

Destination site image

Copy quick launch Navigation

Follow the below code to copy the quick launch from one site to another site.

$srcsiteUrl <span class="token operator">=</span> <span class="token maybe-class-name">Read</span> <span class="token operator">-</span> <span class="token maybe-class-name">Host</span> <span class="token string">"Enter sorce site url"</span>
$destSiteUrl <span class="token operator">=</span> <span class="token maybe-class-name">Read</span> <span class="token operator">-</span> <span class="token maybe-class-name">Host</span> <span class="token string">"Enter destination site url"</span>
$credential <span class="token operator">=</span> <span class="token maybe-class-name">Get</span> <span class="token operator">-</span> <span class="token maybe-class-name">Credential</span>
#connect source site url
<span class="token maybe-class-name">Connect</span> <span class="token operator">-</span> <span class="token maybe-class-name">PnPOnline</span> <span class="token operator">-</span> <span class="token maybe-class-name">Url</span> $srcsiteUrl <span class="token operator">-</span> <span class="token maybe-class-name">Credentials</span> $credential
$TopNavs <span class="token operator">=</span> <span class="token maybe-class-name">Get</span> <span class="token operator">-</span> <span class="token maybe-class-name">PnPNavigationNode</span> <span class="token operator">-</span> <span class="token maybe-class-name">Location</span> <span class="token maybe-class-name">QuickLaunch</span> <span class="token operator">|</span> <span class="token maybe-class-name">Select</span> <span class="token maybe-class-name">Title</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Url</span>
#connect destination site url
<span class="token maybe-class-name">Connect</span> <span class="token operator">-</span> <span class="token maybe-class-name">PnPOnline</span> <span class="token operator">-</span> <span class="token maybe-class-name">Url</span> $destSiteUrl <span class="token operator">-</span> <span class="token maybe-class-name">Credentials</span> $credential
<span class="token function">foreach</span><span class="token punctuation">(</span><span class="token parameter">$TopNav <span class="token keyword keyword-in">in</span> $TopNavs</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span>$TopNav<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Url</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token maybe-class-name">Add</span> <span class="token operator">-</span> <span class="token maybe-class-name">PnPNavigationNode</span> <span class="token operator">-</span> <span class="token maybe-class-name">Location</span> <span class="token maybe-class-name">QuickLaunch</span> <span class="token operator">-</span> <span class="token maybe-class-name">Title</span> $TopNav<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Title</span></span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

$srcsiteUrl = Read - Host "Enter sorce site url"

$destSiteUrl = Read - Host "Enter destination site url"

$credential = Get - Credential

#connect source site url

Connect - PnPOnline - Url $srcsiteUrl - Credentials $credential

$TopNavs = Get - PnPNavigationNode - Location QuickLaunch | Select Title, Url

#connect destination site url

Connect - PnPOnline - Url $destSiteUrl - Credentials $credential

foreach($TopNav in $TopNavs) {

if ($TopNav.Url) {

Add - PnPNavigationNode - Location QuickLaunch - Title $TopNav.Title

}

Source Site Image

Destination site image

Conclusion

The above-mentioned script can be used to copy all types of Navigation from one site to another which can be really a great time saver script. If some navigation is getting changed in the site as per the requirement of the organization, then one can use this script to copy all the navigation options from one site to another which is really helpful.

SharePoint Hosting – Implementation Of Office UI Grid, Accordion, Datepicker, RichText Controls In SPFx

Jul 29th

Posted by Peter in European SharePoint 2013 Hosting

In this article, we will learn about how to leverage the office UI fabric grid in our SPFx component and also the implementation of accordion, Datepicker, and richtext controls in our component.

OfficeUI Grid

As similar to bootstrap grid breakpoint, OfficeUI also has its own breakpoints.

Grid Layout

Breakpoint	Range
small (SM)	320px – 479px
medium (MD)	480px – 639px
large (LG)	1023px
extra large (XL)	1365px
extra extra large (XXL)	1366px – 1919px
extra extra extra large (XXXL)	1920px and so on…

The screen is divided into 12 columns, here it’s only available via Fabric Core CSS.

Import the below package in your TSX file, to use fabricui layout,

To use the grid in your component, you must use the below classes,

class=”ms-Grid” –> this should be in top parent class

class=”ms-Grid-row” –> this should be in adjacent parent class

<div className="ms-Grid-row">
  <div className="ms-Grid-col ms-sm12 ms-md6 ms-lg4">
    <TextField label="Disabled" disabled defaultValue="I am disabled" />
    </div>
    <div className="ms-Grid-col ms-sm12 ms-md6 ms-lg4">
    <TextField label="Standard" />
    </div>
    <div className="ms-Grid-col ms-sm12 ms-md6 ms-lg4">
    <TextField label="Required " required />
    </div>
  </div>

</div>

</div>

</div>

Here the number is the columns, which range from 1 – 12.

Push and pull

This is used to change the order,

Push–> push to right(left to right)

Pull–> pull from the right(right to left)

eg,

Accordion

This control is used to implement a collapsible segment in our SPFx component, this can be done by using @pnp/spfx-controls-react

In npm installation,

Import statement,

eg,

<span class="token tag"><span class="token punctuation">&lt;</span>Accordion title<span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Section 1<span class="token punctuation">"</span></span> defaultCollapsed<span class="token attr-value"><span class="token punctuation attr-equals">=</span>{false}</span>  key<span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>1<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token punctuation">&lt;</span>div <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token punctuation">&lt;</span>div className<span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ms-Grid-row<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token punctuation">&lt;</span>div className<span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ms-Grid-col ms-sm12 ms-md6 ms-lg4<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token punctuation">&lt;</span>TextField label<span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> disabled defaultValue<span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I am disabled<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token punctuation">&lt;/</span>div<span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token punctuation">&lt;/</span>div<span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token punctuation">&lt;/</span>div<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;/</span>Accordion<span class="token punctuation">&gt;</span></span>

<div >

</div>

</Accordion>

Properties

title	string
defaultCollapsed	boolean
className	string

Date picker

This control is used to implement datepicker in our SPFx component.

Npm installation,

Import statement,

eg,

Rich text

Npm installation,

Import statements,

eg,

Steps

Open a command prompt and create a directory for the SPFx solution.

md spfx-MyAccordian

Navigate to the above-created directory.

cd spfx-MyAccordian

Run the Yeoman SharePoint Generator to create the solution.

yo @microsoft/sharepoint

Solution Name

Hit enter for the default name (spfx-MyAccordian in this case) or type in any other name for your solution.

Selected choice – Hit Enter

Target for the component

Here, we can select the target environment where we are planning to deploy the client web part; i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).

Selected choice – SharePoint Online only (latest).

Place of files

We may choose to use the same folder or create a subfolder for our solution.

Selected choice – same folder.

Deployment option

Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.

Selected choice – N (install on each site explicitly).

Permissions to access web APIs

Choose if the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant.

Selected choice – N (solution contains unique permissions)

Type of client-side component to create

We can choose to create a client-side web part or an extension. Choose the web part option.

Selected choice – WebPart

Web part name

Hit Enter to select the default name or type in any other name.

Selected choice – MyAccordian

Web part description

Hit Enter to select the default description or type in any other value.

Framework to use

Select any JavaScript framework to develop the component. Available choices are – No JavaScript Framework, React, and Knockout.

Selected choice – React

The Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

Once the scaffolding process is completed, lock down the version of project dependencies by running the below command,

npm shrinkwrap

In the command prompt, type the below command to open the solution in the code editor of your choice.

In MyAccordian.tsx,

Expected Output

PC view

Mobile view

Datepicker

RichText

Posts tagged trick SharePoint 2013 Hosting

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 Hosting – Copy Navigation Using PowerShell

Copy hub Navigation

Copy quick launch Navigation

Conclusion

SharePoint Hosting – Implementation Of Office UI Grid, Accordion, Datepicker, RichText Controls In SPFx

Steps

Expected Output

BLOGROLL

Featured On

Posts tagged trick SharePoint 2013 Hosting

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 Hosting – Copy Navigation Using PowerShell

Copy hub Navigation

Copy quick launch Navigation

Conclusion

SharePoint Hosting – Implementation Of Office UI Grid, Accordion, Datepicker, RichText Controls In SPFx

Steps

Expected Output

BLOGROLL

Featured On

Tags