Steps Of SpFx with jQueryUI

Steps Of SpFx with jQueryUI

1.        Setup and configure spfx
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment
Let’s Create a client-side webpart (Add jQueryUI Accordion to your SharePoint client-side web part)

2.        Create Directory
>>  md testWp

3.        Enter Directory
>>  cd testWp

Create a new web part by running the Yeoman SharePoint Generator
>> yo @microsoft/sharepoint

Accept the default jquery-webpart as your solution name and choose Enter.
Choose SharePoint Online only (latest), and press Enter.
Select Use the current folder for where to place the files.
Choose N to require the extension to be installed on each site explicitly when it's being used.
Choose WebPart as the client-side component type to be created.

The next set of prompts will ask for specific information about your web part:
Type jQuery for the web part name and choose Enter.
Enter jQuery Web Part as the description of the web part and choose Enter.
Accept the default No JavaScript framework option for the framework and choose Enter to continue.

4.        Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
>>  npm shrinkwrap

Next, type the following to open the web part project in Visual Studio Code:
>>  code .

5.        In the console, type the following to install jQuery npm package:
>>  npm install --save jquery@2
Now type the following to install jQueryUI npm package:
>>  npm install --save jqueryui

6.        Next we'll need to install the typings for our project. Starting from TypeScript 2.0, we can use npm to install needed typings.
>> npm install --save @types/jquery@2
>> npm install --save @types/jqueryui

7.        Unbundle external dependencies from web part bundle
By default, any dependencies you add are bundled into the web part bundle. In some cases, this is not ideal. You can choose to unbundle these dependencies from the web part bundle.

In Visual Studio Code, open the file config\config.json.

This file contains information about your bundle(s) and any external dependencies.

The bundles region contains the default bundle information - in this case, the jQuery web part bundle. When you add more web parts to your solution, you will see one entry per web part

{

  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",

  "version": "2.0",

  "bundles": {

    "j-query-web-part": {

      "components": [

        {

          "entrypoint": "./lib/webparts/jQuery/JQueryWebPart.js",

          "manifest": "./src/webparts/jQuery/JQueryWebPart.manifest.json"

        }

      ]

    }

  },

  "externals": {

    "jquery":"node_modules/jquery/dist/jquery.min.js",

    "jqueryui":"node_modules/jqueryui/jquery-ui.min.js"

  },

  "localizedResources": {

    "JQueryWebPartStrings": "lib/webparts/jQuery/loc/{locale}.js"

  }

}

8.        Build the Accordion
Open the project folder jquery-webpart in Visual Studio Code. Your project should have the jQuery web part that you added earlier under the /src/webparts/jQuery folder.

Add Accordion HTML
Add a new file in the src/webparts/jQuery folder called MyAccordionTemplate.ts.
Create and export (as a module) a class MyAccordionTemplate that holds the HTML code for the accordion.

  export default class MyAccordionTemplate {
    public static templateHtml: string =  ‘
      


Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit  amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
            

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
            


List item one
List item two
List item three



Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in            faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
            

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per            inceptos himenaeos.
            

’;
}

9.        Import Accordion HTML
In Visual Studio Code, open src\webparts\jQuery\JQueryWebPart.ts.
At the top of the file, where you can find other imports, add the following import:
import MyAccordionTemplate from './MyAccordionTemplate';

10.      Import jQuery and jQueryUI
You can import jQuery your web part in the same way that you imported MyAccordionTemplate.
At the top of the file, where you can find other imports, add the following imports:
import * as jQuery from 'jquery';
import 'jqueryui';
Next, you'll load some external css files. To do that, use the module loader. Add the following import:
import { SPComponentLoader } from '@microsoft/sp-loader';

11.      To load the jQueryUI styles, in the JQueryWebPart web part class, you'll need to add a constructor and use the newly imported SPComponentLoader. Add following constructor to your web part.
public constructor() {
    super();
    SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
  }
This code does the following:
Calls the parent constructor with the context to initialize the web part.
Loads the accordion styles from a CDN asynchronously.

Render Accordion

In the jQueryWebPart.ts, go to the render method.
Set the web part's inner HTML to render the accordion HTML:

public render(): void {
  this.domElement.innerHTML = MyAccordionTemplate.templateHtml;
  const accordionOptions: JQueryUI.AccordionOptions = {
    animate: true,
    collapsible: false,
    icons: {
      header: 'ui-icon-circle-arrow-e',
      activeHeader: 'ui-icon-circle-arrow-s'
    }
  };
  jQuery('.accordion', this.domElement).accordion(accordionOptions);
}

>> gulp serve

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part

Sharepoint PowerShell Count List Items By Moderation Status

Add-PSSnapin Microsoft.SharePoint.PowerShell -erroraction SilentlyContinue
$site = Get-SPSite("http://testurl")
$OutArray = @()
foreach($web in $site.AllWebs)
{

 $list = $web.Lists.TryGetList("Sayfalar")
 $listitems = $list.Items | where {$_['_ModerationStatus'] -eq 0}
 $Count = $listitems.Count
 Write-Host $web.Url ">>" $Count

}

List All Content Types & Get List Of Items (documents/pages) used by Content types (PowerShell)

List All Content Types

$site = Get-SPSite  http://testsiteur

$web = $site.RootWeb

foreach ($ctype in $web.ContentTypes) {$ctype.Name+" :"+ $ctype.ID}

 Get List Of Items (documents/pages) used by Content types

$webs = get-spsite http://testsiteurl  | get-spweb 

foreach ($web in $webs)
{
  foreach ($lst in $web.lists)
  {
    foreach ($item in $lst.Items)
    {
      if ($item.ContentType.Name -eq "Telefon")
      { $item.ContentType.Name +"-"+ $item.Url}
    }
  }
  $web.Dispose() 
}

Get All Content Databases from SQL by PowerShell

[reflection.assembly]::LoadWithPartialName("Microsoft.SqlServer.Smo")
$sqlServer = new-object ("Microsoft.SqlServer.Management.Smo.Server") "test\testsqlserver"
foreach($sqlDatabase in $sqlServer.databases) {$sqlDatabase.name}

Sharepoint Get All Features by PowerShell

Get-SPFeature | Sort @{Expression={$_.GetTitle(1033)}} -Descending:$false |
ft @{Label='ID';Width=40;Expression={$_.Id}}, @{Label='Title';Width=250;Expression={$_.GetTitle(1033)}} |
Out-File -Width 350 "c:\TEMP\features.txt"

Get SharePoint Content Database Sizes by PowerShell

$date = Get-Date -Format "dd-MM-yyyy" 
Add-PSSnapin Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue
$TXTFile = "c:ReportsSPContentDatabase_$date.txt"
$webapps = Get-SPWebApplication
foreach($webapp in $webapps)
{
$ContentDatabases = $webapp.ContentDatabases
Add-Content -Path $TXTFile -Value "Content databases for $($webapp.url)"
foreach($ContentDatabase in $ContentDatabases)
{
$ContentDatabaseSize = [Math]::Round(($ContentDatabase.disksizerequired/1GB),2)
Add-Content -Path $TXTFile -Value "-     $($ContentDatabase.Name): $($ContentDatabaseSize)GB"
}
}
------------------------------------------------------------------------------------------

-Send Results By Email-

Add-PSSnapin Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue
$date = Get-Date -Format "dd-MM-yyyy" 
$TXTFile = "c:ReportsSPContentDatabase_$date.txt"
$SMTPServer = "relay.com"
$emailFrom = "test@test.com"
$emailTo = "testto@test.com"
$subject = "Content Database size reports"
$emailBody = "Daily/Weekly/Monthly report on Content databases"

$webapps = Get-SPWebApplication
foreach($webapp in $webapps)
{
$ContentDatabases = $webapp.ContentDatabases
Add-Content -Path $TXTFile -Value "Content databases for $($webapp.url)"
foreach($ContentDatabase in $ContentDatabases)
{
$ContentDatabaseSize = [Math]::Round(($ContentDatabase.disksizerequired/1GB),2)
Add-Content -Path $TXTFile -Value "-     $($ContentDatabase.Name): $($ContentDatabaseSize)GB"
}
}
if(!($SMTPServer) -OR !($emailFrom) -OR !($emailTo))
{
Write-Host "No e-mail being sent, if you do want to send an e-mail, please enter the values for the following variables: $SMTPServer, $emailFrom and $emailTo."
}
else
{
Send-MailMessage -SmtpServer $SMTPServer -From $emailFrom -To $emailTo -Subject $subject -Body $emailBody -Attachment $TXTFile
}

Internal Value for Approval Status

This post is mainly for my own reference purpose. The internal field name for approval status of a list/library item is _ModerationStatus, which has corresponding values and it is type of ModStat:

Status	Internal Value
Approved	0
Rejected	1
Pending	2
Draft	3

Sample usage for these values in CAML query : Retrieve all Approved documents from a particular document library

CAML query would look something like below:

<Where><Eq><FieldRef Name=’_ModerationStatus’ /><Value Type=’ModStat’>0</Value></Eq></Where>

Referance:

http://sharepointwriting.blogspot.com.tr/2011/10/internal-value-for-approval-status.html

Create Site Columns & Site Content Types by PowerShell

• Take care all columns Web id & Lookup Filed List id
  If you have Lookup field first create list and get id
  
  

Sharepoint Online Redirect(Sandbox solution)

Sharepoint Field get ıtem Append Changes to Existing Text

 public static string GetVersionedMultiLineTextAsPlainText(SPListItem item, string key)
        {

            StringBuilder sb = new StringBuilder();

            foreach (SPListItemVersion version in item.Web.Lists[item.ParentList.ID].Items[item.UniqueId].Versions)
            {

                SPFieldMultiLineText field = version.Fields[key] as SPFieldMultiLineText;

                if (field != null)
                {

                    string comment = field.GetFieldValueAsText(version[key]);

                    if (comment != null && comment.Trim() != string.Empty)
                    {

                        sb.Append("");

                        sb.Append(version.CreatedBy.User.Name).Append(" (");

                        sb.Append(version.Created.ToString("MM/dd/yyyy hh:mm tt"));

                        sb.Append(")

");
                        sb.Append("-" + comment);
                        sb.Append("
");
                    }

                }

            }

            return sb.ToString();

        }