The requirement was to show images and videos in a grid, with the possibility to download images and see all the files in carousel.

The images and videos are located in a SharePoint Online library and the size of the files are large, 12MB or plus for image and 40MB or plus for videos.

The Challenge

The challenge was to build an application, which was easy to use and works on any device, and was quick to view files.

The Solution

For the building of the application for the UI I used the components of the Office UI Faric and for accessing the data, reading files from the SharePoint library, I used the PnPjs library.

To create the thumbnails of the images for the grid, I used the Microsoft Graph API’s to resize the images. These API’s allows you to read several pre-defined formats or set the size we want.

Here is an excellent article from @VelinGeorgiev that explains how to use these Graph API’s https://blog.velingeorgiev.com/resize-sharepoint-image-by-using-microsoft-graph-api

For Carousel I used a React Component called React-Slick and for the rendering of the video, the component React-Video. All files used in Carousel, are loaded in lazy mode, progressively.

The Web Part has as properties:

• Site Url – Url of site to get libraries
• List of libraries, by default is select the first
• number of files to load, maximum is 200

The Application

This SPFx will soon be available in sp-dev-fx-webparts.

Thank you for reading!

The post Multimedia Gallery – SPFx App appeared first on Blog IT.

This Web Part allows you to manage events on a calendar. Uses an existing calendar list on any site. The location and name of the list is defined in the properties of the web part.

Some Feature:

• Add attendes
• Add location from Map
• RichText Editor, support add images, embedded content, format text, etc
• Color events (random generated)
• Callout  with information about owner of event, location and title.
• Multiple Calendar View (Month, Week, Day and Agenda)

 Screenshots

Calendar Views

Web Part Properties

Calendar Week View

Calendar Day View

Calendar Agenda View

Add Event

Edit Event

Delete Event

This web part soon will be available on SharePoint/sp-dev-fx-webpart.

Thank you for reading!

Sharing is Caring!

The post SPFx Calendar Web Part appeared first on Blog IT.

This web part allows tenant administrators to manage site designs through a graphical interface.

Only the tenant administrators are allowed to manage site designs, the web part verifies if current user has tenant administrator role.

Features available :

• Create a site design
• Edit site design
• Delete site design
• Manage site scripts associated to a site design
• Manage site design rights
• Apply site design 

List Site Designs

Add, Edit, Delete, Site Designs

Site Design Rights

Site Scripts Associated to Site Design

Apply Site Design

This web part was submitted to sp-dev-fx-webpart. (PR Created) soon it will be available.

Thank for reading!

sharing is caring !

The post SPFx – Site Designs Manager appeared first on Blog IT.

Tenant properties are used to store information, such as configuration settings, login information, or other information used by applications. These properties are stored in the application catalog site property named “storageentitiesindex”.

The tenant properties are managed by tenant administrators by using
SharePoint PnP PowerShell, SharePoint Online PowerShell, Office 365 Cli or REST API’s.

The Web Part

This web part allows tenant administrators to manage tenant properties through a graphical interface.

Only the tenant administrators are allowed to manage tenant properties, the web part verifies if current user has tenant administrator role.

User without tenant admin role:

Web part allows you to create, edit, and remove tenant properties.

List tenant properties

Add tenant Property

Edit tenant property

Delete tenant property

Thank you for reading,

Source code is here but soon will be available in sp-dev-fx-webparts.

Sharing is Caring!

The post SPFx – Tenant Properties Web Part appeared first on Blog IT.