How to bind static images in gallery control in Canvas App?

Issue:

Recently I was working in Canvas App, Power Apps. We needed to prepare a mock up for a simple product app. In that we have 3 screens – Dashboard, Edit and New Item screen. For Dashboard, we were given dummy product images and content like product name and description.

So, I started working on that. I uploaded images in the media. I created a Table for data and tried to bind in the Gallery control. but I faced a strange issue. The Image was not rendering. Below was my table creation code on the app on-start event:

 Set(ProductsData,Table(  
   {  
     ProductTitle:"Green Tea Cinnamon",  
     ProductDescription:"Served hot or iced, this green tea contains cinnamon and ginger with a touch of mint for a refreshing taste. Naturally sweetened with apple juice, this tea is a great alternative to sugar-filled teas",  
     Image:"Contoso Tea(4)"  
   },  
    {  
     ProductTitle:"Green Tea Rose",  
     ProductDescription:"GREEN TEA with ROSE is a green tea base blended beautifully flavoured with Rose petals giving fresh delicate taste with aromatic rose scent reminiscent of Turkish delight. This is a lovely delicate green tea that must be tried! DO NOT USE BOILING WATER on any GREEN tea as it will make it taste bitter.",  
     Image:"Contoso Tea(12)"  
   },  
    {  
     ProductTitle:"Green Tea Mint",  
     ProductDescription:"Mint green tea can help improve digestion and relieve symptoms of indigestion, bloating, and gas. It may help boost the immune system and protect against infections. Mint green tea can help improve mental clarity and focus, as well as reduce stress and anxiety.",  
     Image:"Contoso Tea(14)"  
   }  
   ))  

Solution:

In such situation, I am getting poor in searching for solution. Whatsoever terms I search in google; I find out something new but not the solution. Most of the blogs are written on how to bind image from SharePoint. So, I am writing this blog to help myself and others in future.

So, I go to learn the basic and search how to bind image in control and I found solution in Power Apps community question that was mentioning how to bind dynamic image on gallery. I found that the issue is with the syntax. When you need to bind such things that Power Apps needs to resolve from itself, we need to use single quote (‘) instead double quote when you create your data source. So, the correct data structure will be as follow:

 Set(ProductsData,Table(  
   {  
     ProductTitle:"Green Tea Cinnamon",  
     ProductDescription:"Served hot or iced, this green tea contains cinnamon and ginger with a touch of mint for a refreshing taste. Naturally sweetened with apple juice, this tea is a great alternative to sugar-filled teas",  
     Image:'Contoso Tea(4)'  
   },  
    {  
     ProductTitle:"Green Tea Rose",  
     ProductDescription:"GREEN TEA with ROSE is a green tea base blended beautifully flavoured with Rose petals giving fresh delicate taste with aromatic rose scent reminiscent of Turkish delight. This is a lovely delicate green tea that must be tried! DO NOT USE BOILING WATER on any GREEN tea as it will make it taste bitter.",  
     Image:'Contoso Tea(12)'  
   },  
    {  
     ProductTitle:"Green Tea Mint",  
     ProductDescription:"Mint green tea can help improve digestion and relieve symptoms of indigestion, bloating, and gas. It may help boost the immune system and protect against infections. Mint green tea can help improve mental clarity and focus, as well as reduce stress and anxiety.",  
     Image:'Contoso Tea(14)'  
   }  
   ))  

Once I fixed the syntax, my images started showing in the gallery.

Reference:

• https://powerusers.microsoft.com/t5/Building-Power-Apps/How-to-dynamically-change-Gallery-Image/td-p/942875

Copy-PNPFile – “Failed to verify the existence of destination location at” Error.

Error:

Recently, I was working on a migration task. I needed to migrate a few pages from the dev site to production. As this was not full migration, we were not going to use any 3rd party tool like Sharegate. So, we decided to use PowerShell to achieve our goal. Luckily, we found the “Copy-PNPFile” command in PNP PowerShell.

But when we use this to migrate, we found the below error: 

Copy-PnPFile: {"odata.error":{"code":"-2147213249, Microsoft.SharePoint.Deployment.SPMigrationQosException", "message":{"lang": "en-US", "value": "Failed to verify the existence of destination location at

Solution:

The solution to this problem was simple. Make sure you didn’t add “/” at the end of the target. Once I removed this, the error resolved itself.

Changing the below code from

 $TargetFolderURL = "/sites/Department2/Shared%20Documents/"  

To this

 $TargetFolderURL = "/sites/Department2/Shared%20Documents"  

And running the script again solved the problem.

Resources

• https://techcommunity.microsoft.com/t5/windows-powershell/error-while-coping-file-from-one-document-library-to-other/m-p/3295988

Video Embed Using Highlighted WebPart In SharePoint Online Modern Page

Recently our client provided us company anniversary video and asked us if we could add it to SharePoint online site and showcase the result. So, I thought about what the options available are. And I am writing this blog to showcase the options available and their advantages and limitations. Let’s see the options first:

• Stream (Classic)
• YouTube
• File Viewer
• Embed 
• Hero 
• Highlighted Content - This blog

If you want to check any previous options, you can click on that option in the above list and read more about that option.​

If you want to add a video to from current site or any site in your tenant, then you can use this option. For this blog, we will use video from the current site. 

• Upload video to SharePoint Library.

• Now add Highlighted Content webpart to your page.

• Select the pencil icon to edit the web part.

• In the Source dropdown, select "A document library on this site".
• In the Document library dropdown, select the document library where your videos are stored.
• In the Document type dropdown, select Video.

• In the Filter and sort section, for the Filter dropdown select Column name.

• In the Column name dropdown, select Name (File).
• In the next dropdown, select “Equals”.
• In the Enter search value field, enter the name of video with extension. For example, in my case we will enter “Sample Video 1.mp4”.

• In Layout, select carousal.

• Close the ribbon. Update video title manually.

• Save the page.

• Video will render as below.

Advantage:

• The select option can pick video from classic libraries, like site assets.
• Video is available to any user who has access to the file. If you want to manage permission, that can be done using SharePoint’s permission management. 
• The video takes full section width.
• Video provides you expected functionality like shows thumbnail and provides play icon. On play icon click, the video starts.
• With Stream on SharePoint coming, Microsoft is promoting this option to build video gallery kind of functionality. You can read more on below link:
  Link - https://learn.microsoft.com/en-us/stream/streamnew/portals-set-of-videos

Limitations:

• We need to provide title in carousal view manually.
• There are no description or caption functionality. Although you can overcome this by adding the details below the title. The only issue is the separation of title and description is not identical as both have same font size. 

• On play button click, it will open video in stream.

SharePoint Online Management Shell V16.0 assembly error fix

Issue:

I recently required to use SharePoint Management shell to run some O365 PowerShell commands. But as soon as I run the SharePoint Management shell in administrative mode, I received below error:

Could not load type 'Microsoft.SharePoint.Client.Publishing.PortalLaunch.PortalLaunchRedirectionType' from assembly 'Microsoft.SharePoint.Client.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c'.

I have gone through many links that tells to uninstall the assembly and reinstall, but I didn’t find the exact step by step guide. So, I am writing this blog to provide step by step guide in case someone else might face such issue.

Resolution:

The reason of this error is conflicts between different versions of Sharepoint Online SDKs (SharePoint Client Components, SharePoint Online Management Shell). So correct way to solve this problem is the following:

• Go to Control Panel > Programs and features and uninstall all instances of SharePoint Online Management Shell and SharePoint Client Components.
  
  

• Open PowerShell console and uninstall existing versions of Microsoft.Online.SharePoint.PowerShell module:

 Uninstall-Module -Name Microsoft.Online.SharePoint.PowerShell -AllVersions  

• After that close PowerShell, open new session and install latest version of Microsoft.Online.SharePoint.PowerShell module:

 Import-Module -Name Microsoft.Online.SharePoint.PowerShell -Force   

• Install SharePoint Online Management Shell latest version from below link:https://www.microsoft.com/en-in/download/details.aspx?id=35588

Now when you start the SharePoint Online Management Shell as administrator, you will not face the error.

Reference:

• http://sadomovalex.blogspot.com/2020/09/how-to-fix-error-could-not-load-type.html

Failed to Install SharePoint Generator in Setting up MS Teams Tab

Recently, I was learning how to create an app that we can use as tab in MS Teams. Microsoft has provided a simple tutorial to get things started. 

Link - https://docs.microsoft.com/en-us/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode

I installed the pre-requisites as mentioned in the blog. But When I created a tab app with SPFx, I got error "Failed to Install SharePoint Generator".

Resolution:

The issue with the tutorial is that it provide details - Use the Node.js version 14 or 16 LTS release version of Node js. It has directly provided link to the Node Js Home page which will showcase their latest version for download. You need to scroll down to see previous release and in that you need to find out the 14 LTS version.

When I go deep in the error log, I found out that the Node vesrsion supported should be 14.14.0 to 15.0.0. Once I installed the correct version I was able to complete the app creation process.

I am sharing this information as I am not able to see any way to contact Microsoft for updating the tutorial. Hope if someone needs help, this will provide some help.

Video Embed using Hero webpart in SharePoint Online Modern Page

Recently our client provided us company anniversary video and asked us if we could add it to SharePoint online site and showcase the result. So, I thought about what the options available are. And I am writing this blog to showcase the options available and their advantages and limitations. Let’s see the options first:

• Stream (Classic)
• YouTube
• File Viewer
• Embed 
• Hero - This blog
• Highlighted Content

If you want to check any previous options, you can click on that option in the above list and read more about that option.​

If you want to add a video to your current site or any external site, then you can use this option. For this blog, we will use video from the SharePoint site. 

• Upload video to SharePoint Library.

• Now add Hero webpart to your page.
  Note – make sure you add a hero webpart in a single or 2 third section. 

• Select webpart and click on edit in the top left section.

• In the layout option select “one tile”. It will update the webpart to a single-tile layout.

• Now click on the select link button. 

• Select “site” in the left section. Select the library.

• Select the video you want to display. Then click select at the bottom of the panel.

• It will load the video on the page. Click edit on the bottom right part of the tile to edit the details.

• Provide video title. It will display on video as you type. 

• If you want to navigate the user to any other link, open the options section. 
• In that, you can change the link text from “learn more” to anything you want. Also, you can provide a link where you want to redirect users. You can turn off the setting if you don’t want to display the additional link.

• Save the page. 

• The video will render as below.

 

Advantage:

• The select option can pick videos from classic libraries, like site assets. 
• The webpart provides basic features of a thumbnail, and play button, and starts the video on play click. 
• We have the ability to provide an additional link to redirect users to another link. 
• With Stream (On SharePoint) coming, Microsoft is suggesting this webpart for setting up a video gallery kind of functionality. 
  
  Reference - https://learn.microsoft.com/en-us/stream/streamnew/portals-guide-intranet-home#videos-as-curated-hero-elements

Limitations:

• The webpart has a fixed height. That might cut the thumbnail. Also, the video is not occupying the full width of the webpart.  
• We need to provide the title manually. 
• If the source is external like a YouTube link, it will showcase a thumbnail without a play button. On click, it will open in a new tab.
• If you want to embed a single video, you need to add the webpart in a single column or 2 third sections first and need to reset webpart to a single layout.