European Sharepoint 2013 Hosting Blog
Articles about European Sharepoint Hosting Service
SharePoint 2013 Hosting – HostForLIFE :: External REST API Call from SPFx WebPart with Changeable Properties
Sep 15th
In this article, we will see the steps to create a SPFx web part which calls a third-party anonymous REST API to get data from the API. Some properties like URL and item id will be passed from web part properties to change the data in the web part.
Step 1: Open your React SPFx web part and update the interface IThirdpartyApiCallProps.ts inside your components folder. Update the interface with following 3 properties and import WebPartContext to create property for web part context inside react component.
Step 2: Open web part file ThirdpartyApiCallWebPart.ts and add below 2 properties in interface IThirdpartyApiCallWebPartProps. These properties will be passed to component from the web part.
Step 3: Update render() method to set the properties of react component. Context property of react component is set from web part context. Other 2 properties are set from web part properties.
Step 4: Define 2 new text box properties for property pane of web part in getPropertyPaneConfiguration() method. These 2 properties will be passed to react component properties from web part.
Step 5: Define default value for the 2 new properties in web manifest json file. ThirdpartyApiCallWebPart.manifest.json
Step 6: Create a new .ts file in components folder with name IThirdpartyApiCallState. This interface will have all the values which we fetch from single API record https://jsonplaceholder.typicode.com/users/1. All the properties of API record are stored in react component state which is defined in this interface. We will define all those properties which we want to fetch from API.
Step 6: Now open react component .tsx file ThirdpartyApiCall.tsx and do following:
1. Access state interface IThirdpartyApiCallState in tsx file as state management. Import the interface and add as state in React.Component class constructor.
2. Add construct for react component class ThirdpartyApiCall in tsx file. This constructor will be communicating with properties and state through interfaces. Here were initialing all our state properties to null.
3. Update render() method code to show values of properties received from API.
4. Add componentDidMount() method. This method is called after constructor (with null values) -> render(with printing null values) -> componentDidMount (Invoke API and Set Data Into State). Inside this method we are calling InvokeAPIAndSetDataIntoState. This is getting user details from API using getUserDetails() method and adding to state of react component using setState() method. setState() again calls render method internally and print values received from API. Import HttpClient and HttpClientResponse.
5. When properties of web part changed, values in web part needs to be re-rendered based on the changed values. For this we need to implement componentDidUpdate() method. This method is called when properties of react component are changed. Inside this method we are calling InvokeAPIAndSetDataIntoState() again to get data from API.
Now gulp serve and check your web part with data from external API.
You can change the properties like User ID in property pane.
SharePoint 2013 Hosting – HostForLIFE :: Get Current User Profile Properties In SPFx Webpart Using MS Graph API
Aug 26th
In this article, I have explained how to get the current user profile properties in your SPFx webpart using Microsoft Graph API
Create a SPFx project with “Webpart” template & choose the framework “React”
Install the necessary “NPM” packages and am going to use “MSGraphClient” to connect my webpart SPFx with Microsoft Graph API
Microsoft graph types help us to catch the error in your Typescript code faster.
Import the necessary packages in “MyUserInformation.tsx” file under “src\webparts\components”
Open “IMyUserInformationProps” properties interface import the web part context from sp-webpart-base
Add the “WebPartContext” properties inside the interface the final code look like below
Open “MyUserInformationWebPart.ts” include the context inside render()
Create a state interface to hold the data of user profile object
Initialize the constructor to declare the props and state
In “ComponetDidMount()” pass the created function it will retrieve the user information when page renders
Create a child component “UserDetail.tsx” to display user information details. Here I am using parent and child concept in components and send the retrieved data over props
Include the properties interface in your class component look like below
Import the UserDetail.tsx child component in to your parent component “MyUserInformation.tsx”
Inside the render() method pass the component and data over props
Now open the child component “UserDetail.tsx” get the data from the props and render it into your HTML element based on your UI.
Full code
MyUserInformation.tsx
UserDetail.tsx
Before running the webpart include the below permission scopes inside your package-solution.json, You can include multiple permission scopes based on your application requirement
After a successful deployment of your webpart, Open SharePoint admin center choose “Advanced -> API Access” from left navigation window.
Approve your permission scope “User.Read.All” is displayed on “Pending requests”
Hit “Gulp Serve” and run the webpart.
SharePoint 2013 Hosting – HostForLIFE :: Sync SharePoint 2019 Library To Local Folder
Aug 4th
Recently, I needed to implement FBA for a SharePoint 2019 Environment. But before implementing that, I needed to make sure to back up few libraries from site. This is because if we mess things up, that data won’t be affected. One way to do this was to back up content DB for that web application, but it was huge in size. As we require data from couple of libraries, I thought to use local folder integration and then copy files to another drive.
Issue
The classic option that worked in SharePoint 2013 of opening the library with file explorer shows enabled, but stopped working in SharePoint 2019. It will showcase you a dialog for one drive sync client installation. If you allow the popup, the reference link provided at the end of the blog will open in a new tab.
Solution
You have two options showcased on this page.
Solution 1 – Install latest OneDrive client.
They have mentioned all the steps as well.
The issue I faced with this is that you will need to login into OneDrive before use. This requires a Office 365 user. Even after connecting with my trial development account user, I was not able to make it sync to the local folder.
The issue can be anything, such as not having any patch installed in the server, or that the functionality requires both systems to have same credentials. As this is not my primary task, I decided to go with the second solution.
Solution 2 – Install OneDrive Sync app
The support for the OneDrive Sync app is ended on January 11, 2011. So, choose this approach carefully.
To install the previous OneDrive for Business sync app with Office 2013, follow these steps.
Note
If you have Office Professional Plus 2013, Office 365 Enterprise E3, Office 365 Midsize Business, or Office 365 Small Business Premium, then you already have the OneDrive sync app installed.
- Uninstall any earlier versions of the previous OneDrive for Business sync app.
- Select one of the installer links below to download the installer for your language and system edition. If the 32-bit or 64-bit edition of Office is already installed, you must select the same edition for OneDrive.
- Run the downloaded file to start the Setup program.
- Follow the instructions to complete the installation.
- If you’re asked to provide a license key, enter 3V9N8-W93CC-FQPB8-Y9WVF-TVGJ3.
- Once the installation is complete, you can open start menu and in that you will see “Microsoft Office 2013” folder. When you open it, you can view OneDrive for Business 2013.
When you open it, it will ask you to provide a URL to sync and path where you can map your local drive folder.
Provide the URL and map correct path and you will be able to sync your files to local folders.
I did not have permission to install new patch on the server, but if you do have it, try to update the server and check if you can copy files using the OneDrive app in SharePoint 2019 first. If that doesn’t work, you can always perform steps mentioned in solution two.
SharePoint 2013 Hosting – HostForLIFE :: How To Manage Navigation With ACE (Adaptive card extensions) In SPFx
Jul 28th
Introduction
In this article, we will explain how we can create multiple views and navigate between multiple views (quick views and card views), or render/replace views based on conditions.
ACE Navigations:
- Every ACE has below navigation props:
- cardNavigator
- quickViewNavigator
- Thesee can be used in CardView and QuickView:
- Register
- Push
- Pop
- Replace
- Read the current itemID
Scenario
In this example, we will call a graph API to fetch onedrive items. And, based on the result, we will create three card views. Based on the condition, we will render them.
So when we are calling any APIs there are multiple outcomes like records (number of records and no records found) and any error. So for this, we will create three card views. Based on that, we will render different card views.
In the end, our output will look like this:
For getting started with an Adaptive card extension in SPFx then refer to this.
Implementation
Open a command prompt.
Move to the path where you want to create a project.
Create a project directory using:
md folder-name
Move to the above-created directory using:
cd folder-name
Now execute the below command to create an SPFx solution:
yo @microsoft/sharepoint
It will ask some questions, as shown below:
After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:
|
1 |
code . |
Now we will create a service, model, and typescript and JSON files for different views. So in the end, our project structure will look like this (here my solution name is graphApiAce):
Create a models folder inside ACE and create a file called IOnedriveItems.ts.
Now let’s create a service to get Onedrive Items using graph API. So for that, create the below files:
GraphService.ts
IGraphService.ts
Move to the GraphApiAceAdaptiveCardExtension.ts file.
Update states in onInit() as below,
Move to the ./quickView folder and create the below files.
ErrorMessageCardView.ts
In this, we will use an Error icon and text. The description will be based on our requirements.
NoRecordsCardView.ts
In this, we will use an Info icon and text. The description will be based on our requirements.
QuickView.ts
Update data() to set state values to render in JSON.
Move to the ./quickView/template folder.
Update QuickViewTemplate.json
- Update the data key with onedrive items state.
- We will render the name property with webUrl so it will update items and selectAction based on this.
Create ErrorMessageTemplate.json
Create NoRecordsTemplate.json
Now, again, move to the GraphApiAceAdaptiveCardExtension.ts file.
1. Register views
- Here we have to register the views that we are creating.
2. Call services
- Call API which we have created in graph service to get one drive items.
3. Replace views and update states
- While calling an API, if an item’s length is greater than zero, then render records in quick view.
- If the record length is zero, then we will render the no records found view.
- If there is any error, show an error card with an error message.