Posts tagged CSS in SPFx

SharePoint 2013 Hosting – HostForLIFE.eu :: Programmatically “Apply Label To Items In List Or Library”

May 20th

Posted by Peter in European SharePoint 2013 Hosting

This post explains how to apply a label at list/library level in SharePoint Online by using Client Side Object Model in PowerShell. This script will help save us developers a lot of time in getting all the lists/libraries from a individual Site Colletion or subsites. So, here is the script.

Copy the below code to a .ps1 file.
Run the .ps1 file on the SharePoint PowerShell modules.
Configure the input parameters.

Source Code

Add-Type -Path "xxxxx\Microsoft.Online.SharePoint.PowerShell\Microsoft.SharePoint.Client.dll"    
Add-Type -Path "xxxxx\Microsoft.Online.SharePoint.PowerShell\Microsoft.SharePoint.Client.Runtime.dll"    
Add-Type -Path "xxxxx\Microsoft.Online.SharePoint.PowerShell\Microsoft.Online.SharePoint.Client.Tenant.dll"    
#Set parameter values  
$SiteURL="your site"  
$LibraryName="Library Name"  
$labelName=" your retension label name(Retain for 99 years)"  
#Setup Credentials to connect  
$Cred= Get-Credential  
$Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Cred.Username, $Cred.Password)  
#Setup the context  
$Ctx = New-Object Microsoft.SharePoint.Client.ClientContext($SiteURL)  
$Ctx.Credentials = $Credentials  
function GetSPODocLibraryFiles(){  
param  
    (  
        [Parameter(Mandatory=$true)] [string] $SiteURL  
         
    )    
try{  
        $Web = $Ctx.Web  
        $Ctx.Load($web)  
        #Get all immediate subsites of the site  
        $Ctx.Load($web.Webs)   
        $Ctx.executeQuery()  
        #Call the function to Get Lists of the web  
        Write-host "Processing Web :"$Web.URL  
        write-host -f White "Connected to Web";  
        }  
        catch  
        {  
          $Message= "Processing Web :$Web.URL $($_.Exception.Message)"   
          Write-Log -Message $Message -Level ERROR  
        }  
        #Loop All the lists or libraries if you want to apply it for all otherwise get the perticular library  
        $Lists = $Web.Lists   
        $Ctx.Load($Lists)  
        $Ctx.ExecuteQuery()  
  
        ForEach($Lib in $Lists)  
        {  
          #Get the List Name  
        if($Lib | Where-Object { $_.BaseType -Eq "DocumentLibrary" })  
         {  
            Write-host $Lib.Title       
            $Lib = $Ctx.Web.Lists.GetByTitle($LibraryName)  
            $Ctx.Load($Lib)  
            $Ctx.Load($Lib.RootFolder)  
            $Ctx.ExecuteQuery()  
  
  
        try  
      {  
  
     $listId = $Lib.Id  
     $ie = New-Object -com InternetExplorer.Application  
    try  
    {  
        $applyLabelUrl = "$($Web.URL)/_layouts/15/Hold.aspx?Tag=true&List={$($listId)}"  
        Write-Host $applyLabelUrl  
        $ie.visible = $true  
    
        $ie.navigate($applyLabelUrl)  
  
        for ($i = 0; $i -lt 300; $i++)  
        {   
            if ($ie.ReadyState -eq 4) { break }  
  
  
  
            if ($i -eq 299) { throw "Unable to start IE session to simulate HP RM turning off inheritence." }  
        }  
        #Start-Sleep -Seconds 40  
            $complianceTagDropDown = $ie.Document.getElementById('ctl00_PlaceHolderMain_inputFormSectionMain_ctl01_ComplianceTagDropDown')  
  
        for ($i = 1; $i -lt $complianceTagDropDown.options.length; $i++)  
            {   
                if ($complianceTagDropDown.options[$i].text -eq $labelName)  
                {  
                    $complianceTagDropDown.options[$i].selected = $true  
                    $isFound = $true  
                    break  
                }         
            }  
  
        if ($complianceTagDropDown.id -ne "ctl00_PlaceHolderMain_inputFormSectionMain_ctl01_ComplianceTagDropDown")  
        {  
            throw "Didn't get assurance that I found complianceTagDropDown"  
  
        }  
        else  
        {  
            $isFound = $false  
            for ($i = 1; $i -lt $complianceTagDropDown.options.length; $i++)  
            {   
                if ($complianceTagDropDown.options[$i].text -eq $labelName)  
                {  
                    $complianceTagDropDown.options[$i].selected = $true  
                    $isFound = $true  
                    break  
                }         
            }  
  
            if ($isFound -eq $false)  
            {  
                throw "Unable to select '$($labelName)' in complianceTagDropDown. No such option?"  
            }  
            $checkMark=$ie.Document.getElementById('ctl00_PlaceHolderMain_inputFormSectionMain_ctl01_DefaultComplianceTagSyncToListItems')  
            $checkMark.checked =$true  
            $saveButton = $ie.Document.getElementByID('ctl00_PlaceHolderMain_ctl00_RptControls_btnOK')  
            if ($saveButton.id -ne "ctl00_PlaceHolderMain_ctl00_RptControls_btnOK")  
            {  
                throw "Didn't get assurance that I found saveButton"  
            }  
            else  
            {  
                $saveButton.click()  
            }  
  
        }  
  
    }  
    finally  
    {  
        $ie.Parent.Quit()  
        Start-Sleep 1  
     }  
}  
  
finally  
{  
}  
  
}  
}  
  
}  
  
GetSPODocLibraryFiles -SiteURL $SiteURL

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

Add-Type -Path "xxxxx\Microsoft.Online.SharePoint.PowerShell\Microsoft.SharePoint.Client.dll"

Add-Type -Path "xxxxx\Microsoft.Online.SharePoint.PowerShell\Microsoft.SharePoint.Client.Runtime.dll"

Add-Type -Path "xxxxx\Microsoft.Online.SharePoint.PowerShell\Microsoft.Online.SharePoint.Client.Tenant.dll"

#Set parameter values

$SiteURL="your site"

$LibraryName="Library Name"

$labelName=" your retension label name(Retain for 99 years)"

#Setup Credentials to connect

$Cred= Get-Credential

$Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Cred.Username, $Cred.Password)

#Setup the context

$Ctx = New-Object Microsoft.SharePoint.Client.ClientContext($SiteURL)

$Ctx.Credentials = $Credentials

function GetSPODocLibraryFiles(){

param

(

[Parameter(Mandatory=$true)] [string] $SiteURL

)

try{

$Web = $Ctx.Web

$Ctx.Load($web)

#Get all immediate subsites of the site

$Ctx.Load($web.Webs)

$Ctx.executeQuery()

#Call the function to Get Lists of the web

Write-host "Processing Web :"$Web.URL

write-host -f White "Connected to Web";

}

catch

{

$Message= "Processing Web :$Web.URL $($_.Exception.Message)"

Write-Log -Message $Message -Level ERROR

}

#Loop All the lists or libraries if you want to apply it for all otherwise get the perticular library

$Lists = $Web.Lists

$Ctx.Load($Lists)

$Ctx.ExecuteQuery()

ForEach($Lib in $Lists)

{

#Get the List Name

if($Lib | Where-Object { $_.BaseType -Eq "DocumentLibrary" })

{

Write-host $Lib.Title

$Lib = $Ctx.Web.Lists.GetByTitle($LibraryName)

$Ctx.Load($Lib)

$Ctx.Load($Lib.RootFolder)

$Ctx.ExecuteQuery()

try

{

$listId = $Lib.Id

$ie = New-Object -com InternetExplorer.Application

try

{

$applyLabelUrl = "$($Web.URL)/_layouts/15/Hold.aspx?Tag=true&List={$($listId)}"

Write-Host $applyLabelUrl

$ie.visible = $true

$ie.navigate($applyLabelUrl)

for ($i = 0; $i -lt 300; $i++)

{

if ($ie.ReadyState -eq 4) { break }

if ($i -eq 299) { throw "Unable to start IE session to simulate HP RM turning off inheritence." }

}

#Start-Sleep -Seconds 40

$complianceTagDropDown = $ie.Document.getElementById('ctl00_PlaceHolderMain_inputFormSectionMain_ctl01_ComplianceTagDropDown')

for ($i = 1; $i -lt $complianceTagDropDown.options.length; $i++)

{

if ($complianceTagDropDown.options[$i].text -eq $labelName)

{

$complianceTagDropDown.options[$i].selected = $true

$isFound = $true

break

}

if ($complianceTagDropDown.id -ne "ctl00_PlaceHolderMain_inputFormSectionMain_ctl01_ComplianceTagDropDown")

{

throw "Didn't get assurance that I found complianceTagDropDown"

}

else

{

$isFound = $false

for ($i = 1; $i -lt $complianceTagDropDown.options.length; $i++)

{

if ($complianceTagDropDown.options[$i].text -eq $labelName)

{

$complianceTagDropDown.options[$i].selected = $true

$isFound = $true

break

}

if ($isFound -eq $false)

{

throw "Unable to select '$($labelName)' in complianceTagDropDown. No such option?"

}

$checkMark=$ie.Document.getElementById('ctl00_PlaceHolderMain_inputFormSectionMain_ctl01_DefaultComplianceTagSyncToListItems')

$checkMark.checked =$true

$saveButton = $ie.Document.getElementByID('ctl00_PlaceHolderMain_ctl00_RptControls_btnOK')

if ($saveButton.id -ne "ctl00_PlaceHolderMain_ctl00_RptControls_btnOK")

{

throw "Didn't get assurance that I found saveButton"

}

else

{

$saveButton.click()

}

finally

{

$ie.Parent.Quit()

Start-Sleep 1

}

finally

{

}

GetSPODocLibraryFiles -SiteURL $SiteURL

Execute the program. Once it is executed successfully, you can see the label applied in the SharePoint List/Library.

SharePoint 2013 Hosting – HostForLIFE.eu :: CSS in SPFx

May 6th

Posted by Peter in European SharePoint 2013 Hosting

Styling is the most important part of web development. In this article, we will learn how to efficiently consume CSS in our Typescript file.

CSSType

This is an npm package available in the npm repository handle styled attribute in an HTML element.

Installation:

npm i csstype

1	npm i csstype

Necessary imports:

import * as CSS from 'csstype';

1	import * as CSS from 'csstype';

Properties are categorized into different uses and in several technical variations to provide typings that suit as many as possible. The good part is that it supports IntelliSense.

Default	Hyphen	Fallback	HyphenFallback
All	Properties	PropertiesHyphen	PropertiesFallback	PropertiesHyphenFallback
Standard	StandardProperties	StandardPropertiesHyphen	StandardPropertiesFallback	StandardPropertiesHyphenFallback
Vendor	VendorProperties	VendorPropertiesHyphen	VendorPropertiesFallback	VendorPropertiesHyphenFallback
Obsolete	ObsoleteProperties	ObsoletePropertiesHyphen	ObsoletePropertiesFallback	ObsoletePropertiesHyphenFallback
Svg	SvgProperties	SvgPropertiesHyphen	SvgPropertiesFallback	SvgPropertiesHyphenFallback

Categories

All – Includes Standard, Vendor, Obsolete and SVG
Standard – Current properties and extends subcategories StandardLonghand and StandardShorthand (e.g. StandardShorthandProperties)
Vendor – Vendor prefixed properties and extends subcategories VendorLonghand and VendorShorthand (e.g. VendorShorthandProperties)
Obsolete – Removed or deprecated properties
SVG – SVG-specific properties

Variations

Default – JavaScript (camel) cased property names
Hyphen – CSS (kebab) cased property names
Fallback – Also accepts an array of values e.g. string | string[]

Examples

Using default Properties:

var divStyle: CSS.Properties = {  
minHeight:'auto',  
maxHeight:'500px'    
};

var divStyle: CSS.Properties = {

minHeight:'auto',

maxHeight:'500px'

};

By default, it only supports a string if we need to pass number literals.

var divStyle: CSS.Properties<string | number> = {  
   minHeight:'auto',  
   maxHeight:'500px',  
   padding:10  
};

var divStyle: CSS.Properties<string | number> = {

minHeight:'auto',

maxHeight:'500px',

padding:10

};

We can consume this in our tsx file with the following:

<div  style={divStyle}>  </div>

1	<div style={divStyle}> </div>

Sometimes, we need to pass array of values for CSS that uses PropertiesFallback:

const divStyle: CSS.PropertiesFallback<string | number> = {  
  display: ['-webkit-flex', 'flex'],  
  color: 'white',  
  padding:10  
};

const divStyle: CSS.PropertiesFallback<string | number> = {

display: ['-webkit-flex', 'flex'],

color: 'white',

padding:10

};

Sometimes, there is an need for pseudo selectors, in that case:

const divStyle: { [P in CSS.SimplePseudos]?: CSS.Properties } = {  
  ':hover': {  
    display: 'flex',  
  },  
};

const divStyle: { [P in CSS.SimplePseudos]?: CSS.Properties } = {

':hover': {

display: 'flex',

};

It also support hyphen case, this will implemented by:

interface Style extends CSS.Properties, CSS.PropertiesHyphen {}  
const mydivstyle: Style = {  
  'flex-grow': 1,  
  'flex-shrink': 0,  
  'font-weight': 'normal',  
  backgroundColor: 'white',  
  'padding':'10 10 10 10'  
};

interface Style extends CSS.Properties, CSS.PropertiesHyphen {}

const mydivstyle: Style = {

'flex-grow': 1,

'flex-shrink': 0,

'font-weight': 'normal',

backgroundColor: 'white',

'padding':'10 10 10 10'

};

typestyle

This is also an npm package available in the npm repository. By using this package, we can write CSS in a typescript file.

Installation

npm i typestyle

Necessary imports:

import { style,stylesheet } from "typestyle";

1	import { style,stylesheet } from "typestyle";

Similar to the style attribute, we can assign classCss to className using the style method in typestyle, e.g.

const myclassname = style({paddingLeft: 'red',marginLeft:'10px'});

1	const myclassname = style({paddingLeft: 'red',marginLeft:'10px'});

We can consume this in our tsx file with:

<div className={myclassname}> </div>

1	<div className={myclassname}> </div>

Concept – Mixin

A mixin is an object that contains properties for reuse.

The style function can take multiple objects. This makes it easy to reuse simple style objects, e.g.

const redMaker = {color:'red'};  
const bigFont = {fontSize: '50px'};  
const bigRedClass = style(  
  redMaker,  
  bigFont  
);  
  
<div className={bigRedClass}>Hello world</div>

const redMaker = {color:'red'};

const bigFont = {fontSize: '50px'};

const bigRedClass = style(

redMaker,

bigFont

);

<div className={bigRedClass}>Hello world</div>

Concept – Interpolation

You can nest properties for different selectors using the $nest property. Any & in a key for $nest gets replaced with the generated class name when its written to CSS. For example, it allows super simple CSS pseudo class (&:hover, &:active, &:focus, &:disabled) customization. It also allows you to use pseudo-elements ,(e.g. ::after, &::before etc):, child selectors.

const mycolors = style({    
  transition: 'color .2s',    
  color: 'blue',    
  $nest: {    
    '&:hover': {    
      color: 'red'    
    },    
    '&::before': {    
      content:'Hello '    
    }  , '&>*': {  
      marginBottom: 10,  
    },  
    '&>*:last-child': {  
      marginBottom: '0px',  
    }  
  }    
});    
    
<h1 className={mycolors }world</h1>    
    
//output be Helloworld

const mycolors = style({

transition: 'color .2s',

color: 'blue',

$nest: {

'&:hover': {

color: 'red'

'&::before': {

content:'Hello '

} , '&>*': {

marginBottom: 10,

'&>*:last-child': {

marginBottom: '0px',

}

});

//output be Helloworld

Sometimes we need to implement the whole CSS file in the component. That can be achieved with the stylesheet class:

Implementation sample:

const myButton = {  
  border: 'solid thin red',  
  borderRadius: 2,  
  color: 'white',  
  padding: '4px 10px'  
};  
  
const css = stylesheet({  
  component: {  
      display: 'flex'  
  },  
  primaryButton: {  
      backgroundColor: 'darkblue',  
      ...myButton  
  },  
  secondaryButton: {  
      backgroundColor: 'teal',  
      ...myButton  
  }  
});  
  
<div className={css.component}>  
  <button className={css.primaryButton}>Primary</button>  
  <button className={css.secondaryButton}>Secondary</button>  
</div>

const myButton = {

border: 'solid thin red',

borderRadius: 2,

color: 'white',

padding: '4px 10px'

};

const css = stylesheet({

component: {

display: 'flex'

primaryButton: {

backgroundColor: 'darkblue',

...myButton

secondaryButton: {

backgroundColor: 'teal',

...myButton

}

});

<button className={css.primaryButton}>Primary</button>

<button className={css.secondaryButton}>Secondary</button>

</div>

Conclusion

In this article, we learned various types of CSS implementation in SPFx. I hope this helps someone. Happy coding 🙂

Posts tagged CSS in SPFx

SharePoint 2013 Hosting – HostForLIFE.eu :: Programmatically “Apply Label To Items In List Or Library”

SharePoint 2013 Hosting – HostForLIFE.eu :: CSS in SPFx

CSSType

Conclusion

BLOGROLL

Featured On

Posts tagged CSS in SPFx

SharePoint 2013 Hosting – HostForLIFE.eu :: Programmatically “Apply Label To Items In List Or Library”

SharePoint 2013 Hosting – HostForLIFE.eu :: CSS in SPFx

CSSType

Conclusion

BLOGROLL

Featured On

Tags