26
Oct
2018

Create Image Library using SPFx in SharePoint Online

Looking to the issue currently or normally faced by SharePoint Developers and the client’s using SharePoint Online solution regarding creating the SharePoint Picture or Image library manually – we have come up with the concept to create it programmatically. In the previous blog – we provided assistance regarding how to create SPFx web part to display the content of the Picture/Image albums from the Image Library.

Today SPFx has the great hype and client frequently come up with the terms to save the development timings and to implement the requisite precisely in cutting time and have the solution that is more effective and feasible for usage.

For client convenience, our SharePoint developers and consultants pitch them a concept where the web part and image library are simultaneously deployed at a time – no need to perform separate manual steps for creating image library in the SharePoint online site.

Image Library using SPFx

Overview

As SharePoint on-premises privilege us to create custom list/document library using package deployment, similarly now we would like to introduce you how to implement the same concept using SPFx client-side web part in SharePoint Online.

The post covers all the set of all the steps to be performed to get the desired output and implement custom list/document library using package deployment using SharePoint development (Office 365).

Let’s start to create a Picture library step by step.

Prerequisites to create client-side web part

Below mentioned are the tools which are required to be installed/setup in your machine before creating new client-side web part.

  1. Node.js
  2. Code Editors (any one)
    • Visual Studio Code
    • Atom
    • Webstorm
  3. Install Yeoman and Gulp
  4. Install Yeoman SharePoint generator

To see the instruction about how to install/setup above prerequisites, kindly use following link. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment

Create a client-side web part project

Below are steps which are required to perform for creating client-side web part. You can execute the below commands under the Node.js command prompt. Open the Node.js command prompt using Run as Administrator.

  • Create a project directory in your machine using below command:md asset-deployment-webpart
  • Navigate to that directory:cd asset-deployment-webpart
  • Create a new client-side web part by using following command:yo @microsoft/sharepoint
  • After you run the above mentioned command, it will ask you for below question regarding the solution. You can select the answer as per below screenshot.

    Note: You can provide solution name as per your requirement.
    Select Answer

  • Once you select the web part, it will ask you some questions regarding the web part as listed below –
    1. What is your web part name?
    2. What is your web part description?
    3. Which framework would you like to use?

    Below screenshot each of the above mentioned questions. (Answers are auto fetched depending on the above step) For the other questions predefined answers are available but they can be manually modified.

    Auto Fetch Answers

  • Here the solution is provided keeping into consideration – “No JavaScript framework”.
  • Based on the details obtained (as shown in the above screenshot), Yeoman installs the required dependencies and for creating the necessary solution files under that solution.
  • After the solution files are created, it will show the screen like below screenshot.
    Solution files created
  • Use the following command to open the solution in the Visual Studio code.code .

Create folder structure to create Picture library

  • Create a new folder “sharepoint” at the root level of the solutions
  • Create a one sub-folder “assets” under the “sharepoint” folder
  • The structure will be visible to you same like as the below screenshot

Asset Deployment Webparts

Create Element.xml file for Picture library definition

  • First you need to create a new file under the “sharepoint\assets” folder named elements.xml
  • Add below mentioned code in the XML file.

Elements.xml

<?xml version="1.0" encoding="utf-8"?>
 
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
   <ListInstance 
           FeatureId="00bfea71-52d4-45b3-b544-b1c71b620109"
           Title="ImgLibrary" 
           Description="ImgLibrary"
           TemplateType="109"
           Url="ImgLibrary">
   </ListInstance>
 
</Elements>

Create a schema.xml file to define custom picture library structure.

  • Create a new file under the “sharepoint\assets” folder named schema.xml.
  • Add below code in the XML file.

Schema.xml

<List xmlns:ows="Microsoft SharePoint" Title="ImgLibrary" EnableContentTypes="TRUE" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="ImgLibrary" BaseType="1" xmlns="http://schemas.microsoft.com/sharepoint/">
 <MetaData>
   <ContentTypes>
   </ContentTypes>
   <Fields></Fields>
   <Views>
     <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="AllItems.aspx">
       <XslLink Default="TRUE">main.xsl</XslLink>
       <JSLink>clienttemplates.js</JSLink>
       <RowLimit Paged="TRUE">30</RowLimit>
       <Toolbar Type="Standard" />
       <ViewFields>
         <FieldRef Name="LinkTitle"></FieldRef>
       </ViewFields>
       <Query>
         <OrderBy>
           <FieldRef Name="ID" />
         </OrderBy>
       </Query>
     </View>
   </Views>
   <Forms>
     <Form Type="DisplayForm" Url="Forms/DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
     <Form Type="EditForm" Url="Forms/EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
     <Form Type="NewForm" Url="Forms/NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
   </Forms>
 </MetaData>
</List>

Update package-solution.json to add definition files under package

  • Open package-solution.json from the config folder. See the screenshot below.

Open package-solution.json from the config folder

  • As shown in the above screenshot – right side the code is available by default when the solution will be created. (Below is the same snippet available on the right side on the above screenshot)
{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "asset-deployment-webparts-client-side-solution",
    "id": "487c59fe-7c64-408b-95cf-1511171e78df", 
    "version": "1.0.0.0",
    "includeClientSideAssets": true
  },
  "paths": {
    "zippedPackage": "solution/asset-deployment-webparts.sppkg"
  }
}
  • To add the feature – include the files after true (find the changes in the below code snippet)

package-solution.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "asset-deployment-webparts-client-side-solution",
    "id": "487c59fe-7c64-408b-95cf-1511171e78df",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "features": [{
      "title": "asset-deployment-webparts-client-side-solution",
      "description": "asset-deployment-webparts-client-side-solution",
      "id": "442CDCE6-F717-4474-BD26-34622CCC752B",// <= Update with new guid
      "version": "1.0.0.0",
      "assets": {
        "elementManifests": [
          "elements.xml"
        ],
        "elementFiles":[
          "schema.xml"
        ]
      }
    }]
  },
  "paths": {
    "zippedPackage": "solution/asset-deployment-webparts.sppkg"
  }
}
  • Though you can multiple features in the package but it is not recommended by Microsoft to do so
  • elements.xml is referenced under elementManifests for featuring it appropriately for the actual feature XML structure as an element manifest file.

Deployment the web part to SharePoint Online

Follow the below steps to deploy the client-side web part in SharePoint Online.

  • Execute below command to package solution to get basic structure ready for packaging:

gulp bundle

  • Run below command to create solution package:

gulp package-solution

  • Above command creates a package named asset-deployment-webparts.sppkg in sharepoint Ú solution folder.

Solution Folder

  • Open your tenant’s app catalog site
  • Deploy that package (i.e. asset-deployment-webparts.sppkg) file to the app catalogue site.
  • To deploy the package, navigate to app catalog and open the Apps for SharePoint library.
  • Upload/drag and drop the asset-deployment-webparts.sppkg to Apps for SharePoint library inside App Catalog.

Apps for SharePoint

  • SharePoint displays a dialog and asks you to trust the client-side solution. Click Deploy button.

Click Deploy Button

  • Go to any site collection of your tenant where you want to test the app.
  • Go to the site content of the site and search for the app and click on it to add in the site.

Site Content

  • Once app is installed, you need to refresh the page. It will show you the newly created Picture library.

Img Library

Conclusion

An end-user can create the Image Library and display its content in a client side web-part using SPFx with a single deployment package. Thus a single depoyment package reduces the number of deployment process.



Comments

2 thoughts on “Create Image Library using SPFx in SharePoint Online”

  1. Thanks for providing such a nice blog. As you have created an Image Library, in the similar way I created a custom list. Please let me know whether I can create a custom columns in the list definition itself. Any assistance will be grateful.

Leave a Reply

Your email address will not be published. Required fields are marked *