European Sharepoint 2013 Hosting Blog
Articles about European Sharepoint Hosting Service
SharePoint Hosting – Something Went Wrong: Error At Infopath Form On Mobile Device
Jan 17th
We are using InfoPath forms in SharePoint online, though we know it is deprecated and support will end soon. It was quick to design and start using it. But end users were facing issue while opening the form from their mobile devices.
The form doesn’t open and throws “Something went wrong” error as shown below
Solution
Well, after doing a lot of research over the internet, old forums, and documentations found out that this can be fixed easily with small change in URL. Usually, we send emails to user with form link, we have to append a query string parameter to get this working.
Append this parameter to your URL before sending it to user via email notification
&DefaultItemOpen=1
So the InfoPath Form URL would become like below
https://tenant.sharepoint.com/sites/development/_layouts/15/FormServer.aspx?XmlLocation=/sites/development/New Joiner/TestForm.xml&DefaultView=EndUserView&DefaultItemOpen=1
This will make the InfoPath forms open without any issue on the mobile device.
Thanks for reading!
SharePoint Hosting – How To Get Document ID In SharePoint Online?
Jan 6th
In SharePoint online whenever a document is uploaded to SharePoint, a unique ID gets assigned to SharePoint online. This comes very useful when troubleshooting for issues such as search and policies getting applied to the documents. This is mainly useful in records management. Recently we have an issue with one of the document where the specific MCAS (Microsoft Cloud Access Security) is not getting enabled for SharePoint and for troubleshooting it is required to have document IDs. In this article, let’s see some ways to get the document ID.
Using URL Decoder
When opening a word, PPT or excel document in browser you will have the ID embedded in the URL.
Here I have used Meyer’s web to decode the URL. In case you don’t know what meyer’s web docoder is it is an online encoder/decoder which can be used to decode/encode the URLs to get some required information. You can learn more by going to the link in the references section.
In this case the document ID is A3FE8BD4-C494-4280-A642-09A7DC50CB68
You can do the same process for Excel, PPT and you can get the document ID in the same manner. However, if you try the same process for PDF the document ID will not be embedded in URL.
Using REST API
You need to construct the REST API and get it from the request-response from the browser. You can use this REST API, for the word, Excel and PPT as well. I have used the following methods ‘GetFileByServerRelativeURL’. By hitting the below URL you can get the document ID.
If you modify the above rest API URL with UniqueId at the end, you would directly get the Property in an XML output.
In my case the document ID for PDF document is 7c188559-43de-43f3-908f-cb36b2371872
Please make sure to update the above Rest API URL to your file uploaded in our org or personal dev tenant. You can look into the references section on how to work with files and folders in SharePoint using Rest API.
In the next article, we will take a look, how we can use Power Automate to get the document ID without having the above manual steps.
SharePoint Hosting – Audience Targeting For News Posts
Dec 23rd
In this article, we will discuss how Audience targeting works with news posts using a news webpart in SharePoint. Before moving into the topic, we should know why we need audience targeting in news posts. Audience Targeting mainly refers to target a specific group of people to a specific post/page/events. For example – I have two news posts, one news post specifies information about India benefits & another news post specifies information about US benefits. Audience targeting helps India employees to focus on news post meant for Indian employee benefits rather than US employees & vice versa. This helps to provide accurate & relevant information to a specific group of people/audience in a certain interval of time.
Before moving into a few scenarios of audience targeting in news post, please follow below steps to enable audience targeting for sitepages/newspo==st: –
Step 1
Click on the gear icon on the top. Click on site contents.
Step 2
Click on Site pages. Then click on the gear icon in site pages library & click library settings.
Step 3
Click on Audience targeting settings.
Step 4
Check the box and click on Ok.
This enables audience targeting feature for site pages/news.
There are certain conditions where Audience Targeting works in news posts.
Condition 1 – Where Audience targeting works in News Post
For setting up audience targeting in news post, use news webpart. Below are the steps to proceed
- Go to the page where you want to use audience targeting.
- Click on Edit on the top right corner of the page as shown in the below screenshot.
Add the news webpart. Click on “+” icon and then search news in the search box. Select the news webpart.
Click on edit icon on the news webpart. This opens the settings screen on the right.
Enable Audience targeting as shown below; under Organize section do not select any news post.
Now don’t select any news under organize section. Allow it to default to the automatic selection. Audience targeting will work with specific audience setup.
Note: Audience targeting column needs to be enabled in site pages library. Specify the email address of users/O365 group for the Audience targeting column. Refer to the screenshot.
Condition 2 – Where Audience targeting doesn’t work in News Posts
Repeat step (a), (b), (c) & (d) same as Condition-1.
e) Enable Audience targeting as shown below. Under Organize section select any news post.
Audience targeting doesn’t work with specific audience setup.
This way it doesn’t help to target the specific audience for a specific news post.
Summary
If we are applying audience targeting in news posts we need to keep in mind news post must not be organized under organize section. Currently, Microsoft provides this limited feature for audience targeting in news posts.
Now you must be wondering if I applied audience targeting on one news post can other people find it? Yes, but they can search it or browse it under site pages library. However, by default, it will be only shown to the targeted audience on the news webpart.
SharePoint Hosting – Create Animated Welcome SharePoint Framework Webpart
Dec 16th
Everyone thinks about integrating the animations to SharePoint. Today, we are going to unleash the Particle animation effects in the SharePoint Framework with the help of the particles.js.
Create a new Webpart
Let’s create a SharePoint Framework webpart. Navigate to the folder, where you want to store the Webpart project. Then run the below Yeoman SharePoint generator command to create a project.
yo @microsoft/sharepoint
You must answer the questions prompted by the yeoman SharePoint Generator. Let’s create a new SharePoint Solution,
- What is your solution name? animated-welcome
- Only SharePoint Online (latest) is supported. For earlier versions of SharePoint (2016 and 2019) please use the 1.4.1 version of the generator. SharePoint Online only (latest)
- Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? No
- Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No
- Which type of client-side component to create? WebPartAdd new Web part to solution animated-welcome.
- What is your Web part name? AnimatedWelcome
- What is your Web part description? Welcome webpart with Animation
- Which framework would you like to use? React
The generator takes some time (at least 2 to 3 minutes) to scaffold the folder and files with dependencies to the project folder.
To add the particle animation to the webpart. We must add the particle npm package as dependency in the webpart. For that, run the below command,
npm install react-tsparticles
The JSON value should be passed to particle js to animate. For that, add editor control in the webpart property panel. Let’s run the below command to add the pnp property controls to the project,
npm install @pnp/spfx-property-controls –save –save-exact
Develop a Webpart
Now we are ready to start developing the project. Open that project in a VS Code or any editor.
Modify Main file
Open the file AnimatedWelcomeWebPart.ts. Then replace the property interface with the below lines,
Import the propertyFieldCodeEditor control from @pnp/spfx-property-controls by adding the line before the IAnimatedWelcomeWebPartProps declaration.
Then replace the getPropertyPaneConfiguration method with the below lines,
Modify the properties for the AnimatedWelcome component in the render method by replacing it with below method,
Modify the syles
Update the classNames in style file AnimatedWelcome.module.scss with the below code snippet,
Modify the Component
To support newly added properties in the main file; Let’s modify the property file to update the properties.
Open IAnimatedWelcomeProps.ts and replace the entire file with below code,
Open the component file AnimatedWelcome.tsx. Then import the particle components by adding below line on top of the page,
Then replace the render method with below snippet in the same file AnimatedWelcome.tsx,
To add the text content to the webpart, add the below line under the Particles element,
Finally, the render method looks like below,
Webpart is ready. Then edit the webpart and add any JSON that supports particle js to the Edit Particle JSON code textbox.
For example, add the below JSON,
The output of above JSON looks like below,
For more particle JSON, check out the demo page of particle site. Stay tuned for more interesting webparts.
SharePoint Hosting – Animate Your Profile Image Using Microsoft Graph Toolkit In SharePoint
Dec 10th
Do you want to show some effects on your profile image? Let’s do it by combing the Microsoft Graph Toolkit, MGT Editor SharePoint Framework webpart in SharePoint page.
Microsoft Graph Toolkit is a collection of reusable web components and authentication providers for accessing and working with Microsoft Graph. These components help to fetch and work with Microsoft Graph API directly.
We have some tools or packages available on GitHub. These tools make our tasks in integrating Microsoft Graph API in SharePoint easier. This blog helps you integrate those in simple steps by animating your profile picture in SharePoint Framework webpart.
To do that, follow the below steps,
Step 1 – Deploy Microsoft graph toolkit SharePoint framework package
- Download the latest package from this location.
- Upload and deploy the package in SharePoint App Catalog
Step 2 – Deploy the MGT Editor SharePoint Framework Webpart package
- Download the mgteditor-webpart SharePoint framework webpart package from this location.
- Upload and deploy the package to SharePoint App Catalog
Step 3 – Add the webpart
- Navigate to the SharePoint site
- Install or add the package to the site from App Store page
- Create a new modern page or navigate to the existing modern page
- Add the webpart.
Step 4 – Edit and add Microsoft Graph Toolkit components with styles
Start Editing the webpart by clicking the Edit webpart icon to open the WebPart edit panel,
Add the below HTML snippet in the HTML Code editor box.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<mgt-person person-query="me"> <template> <div id="outerContainer" data-if="person.personImage"> <div id="container"> <div class="item"> <img src="{{ person.personImage }}" /> </div> <div class="circle" style="animation-delay: -3s"> </div> <div class="circle" style="animation-delay: -2s"> </div> <div class="circle" style="animation-delay: -1s"> </div> <div class="circle" style="animation-delay: 0s"> </div> </div> </div> <div data-else> {{ person.displayName }} </div> </template> </mgt-person> <style> #container { width: 200px; height: 200px; border-radius:50%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .circle { border-radius: 50%; background: rgba(53,105,243,1); width: 150px; height: 150px; position: absolute; opacity: 0; animation: scaleIn 6s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32); } .item { z-index: 100; padding: 5px; } .item img { width: 100px; border-radius: 50%; } @keyframes scaleIn { from { transform: scale(0.5, 0.5); opacity: 0.35; } to { transform: scale(2.5, 2.5); opacity: 0; } } </style> |
Then save and publish the page.
The HTML snippet contains two sections.
- Microsoft Graph Toolkit Web component with template
- Styles for the web component
<mgt-person> components return the queried user information
<template> with in the component used to render the HTML information
animation and transform property in style section helps to animate the background of the profile picture.
SharePoint Hosting – Set Full Width to Modern SharePoint Online Team Site
Dec 2nd
Modern SharePoint Team site (Group connected as well non-Group created) by default shows a left navigation with pre-configured links, as well we can add our own customized links.
In this article, we will explore how we can turn off the left navigation and make the Team site to work in full width.
Left Navigation
The left navigation helps to consolidate the important links at one place throughout the site navigation, but also takes significant amount of space on the screen.
Make the Team site as full width
Follow the below steps to turn off the left navigation and make use of Team site as full width:
- Navigate to site settings.
- Under Look and Feel, click Navigation Elements.
- Deselect Enable Quick Launch.
- Click OK.
PowerShell
If you need to carry out this on multiple SharePoint Team sites, as well you want to make this functionality available as a step of your site provisioning, this can be achieved with PowerShell.
PnP PowerShell
|
1 2 3 4 5 6 7 |
# Connect to SharePoint Connect-PnPOnline -Url $siteURL # Disable the Quick Launch $web = Get-PnPWeb $web.QuickLaunchEnabled = $false $web.Update() |
The End Result
Once the quick launch is disabled, the Team site will be turned in to full width site experience.
Summary
Modern SharePoint Team site (Group connected as well non-Group created) by default shows a left navigation. It takes significant amount of space on the screen. With simple configuration of quick launch, it can be tuned off to make the Team site available in full width for use.
