26 October 2018
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.
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.
- Code Editors (any one)
- Visual Studio Code
- Install Yeoman and Gulp
- 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.
- Once you select the web part, it will ask you some questions regarding the web part as listed below –
- What is your web part name?
- What is your web part description?
- 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.
- 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.
- 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
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.
<?xml version="1.0" encoding="utf-8"?>
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.
<List xmlns:ows="Microsoft SharePoint" Title="ImgLibrary" EnableContentTypes="TRUE" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="ImgLibrary" BaseType="1" xmlns="http://schemas.microsoft.com/sharepoint/">
<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">
<Toolbar Type="Standard" />
<FieldRef Name="ID" />
<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" />
Update package-solution.json to add definition files under package
- Open package-solution.json from the config folder. See the screenshot below.
- 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)
- To add the feature – include the files after true (find the changes in the below code snippet)
"id": "442CDCE6-F717-4474-BD26-34622CCC752B",// <= Update with new guid
- 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:
- Run below command to create solution package:
- Above command creates a package named asset-deployment-webparts.sppkg in sharepoint Ú 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.
- SharePoint displays a dialog and asks you to trust the client-side solution. 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.
- Once app is installed, you need to refresh the page. It will show you the newly created Picture library.
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.