Articles about European Sharepoint Hosting Service
Other Related Post
SharePoint 2013 Hosting – HostForLIFE :: Enable Session State In SharePoint 2019
Nov 24th
Introduction
While working on SharePoint Server 2019 (on-premise) high-availability setup, client asked to enable session state in the SharePoint production farm, as previously they have faced the issue in high-availability setup via load balancer that whenever any user performs some activity and session is stable for few minutes, the user gets logged out of the application and then user has to login again to access the application, which means user’s session is not persisted.
Description
As you might know that ASP.NET Session state is disabled by default in SharePoint installation, however if you are working with custom solutions, web-parts, third pary tools, etc., persisting the user information per session is very much important and required. So, in this article, I will explain how you can enable session state in SharePoint 2019.
Note
ASP.NET allows persisting session states in below three different ways and it is always a good practice to enable the session state at SQL Server (database) –
- On server memory as an InProc
- On SQL Server to persist session in database (preferred method)
- On Session State Server to persist session on dedicated server memory
Step 1
Enable ASP.NET Session State Service – ASP.NET Session state can be enabled in the SharePoint farm by enabling “SharePoint Server ASP.NET Session State Service” service application on the SharePoint farm. This service application cannot be enabled using SharePoint’s Central Administration interface. This service application can be enabled using below PowerShell command –
Enable-SPSessionStateService –DefaultProvision
By default, this will create service application database with “SessionStateService_<GUID>”, on the database server where SharePoint’s farm configuration database is located and will be provisioned using Windows credentials of the logged in user.
In case you want to create the service application with specific database name, then use the below PowerShell command –
Enable-SPSessionStateService -DatabaseServer <YourDBServerName> -DatabaseName <YourDBName>
Step 2
Check the SharePoint Server ASP.NET Session State Service in Manage Service Applications in SharePoint’s Central Administration –
Step 3
Check if the default service application database is created in the database server
Step 4
The above PowerShell command adds the module in web.config of all the web applications in the farm. Kindly note, that if you have multiple servers in the farm, then module will be added automatically in the web.config file of all the web-front servers, as such you don’t need to add any entry manually in web.config file.
Secondly, a “sessionstate” entry will be created in all the web applications in the farm, as shown in below image
Note
As shown in above image, by default, it would create session for 60 minutes. If you want to increase or decrease session expiration, you can pass “SessionTimeout” parameter while creating ASP.NET Session State Service using Enable-SPSessionStateService command.
Step 5
To ensure that SharePoint web application gets activated to persist ASP.NET sessions, the web.config file needs to be manually updated for the specific SharePoint web application on all web-front servers in the farm. Search for <pages enableSessionState in web.config. By default, its value will be False, you have to make this property as True, as shown in below image
Note
- The web.config path of web application is: C-drive -> inetpub -> wwwroot -> wss -> VirtualDirectories -> WebApplicationPortNumber
- Please take the backup of web.config file before making any manual changes in the web.config file.
I hope by using the information in this article, you will be able to implement session management in SharePoint 2019 farm.
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 Hosting – How To Create Button Inside The SharePoint List
Mar 4th
In this article, we will see how to create a button inside the SharePoint list for each item.
We can create button using JSON formatter in SharePoint modern list.
Sometimes we have requirement for button inside the SharePoint list so user can able to perform operations easily. Here I create edit button for item you can create as per your requirement.
Steps to Create Button inside the List
Step 1
Create or open your existing List.
Step 2
Open List settings
Step 3
Click on Create Column
Step 4
Select Hyperlink or Picture from column type
Step 5
Enter Column Name
Step 6
Then go to the Column Formatting textbox
Step 7
Copy below code inside your Column Formatting text box.
Replace URL in “href”: with your URL
Step 8
Save the column
Output
SharePoint Hosting – Conditionally Show/Hide Fields In SharePoint Online List Forms
Feb 10th
You have a SharePoint list with around 20-25 fields, you want some of the fields to be shown conditionally on the form. For example, you want to show approver field only when estimated expense are beyond certain number. How would you configure to hide the field? What options do we have?
With on-premises SharePoint sites, we were used to make use of JavaScripts or SharePoint designers to achieve such features but with SharePoint online we have limited ways.
Still, we do have multiple options like PowerApps form customization, third party application like Nintex forms or SPFx with custom application page? Wait a second. Can’t we have quick and simple solution?
Solution
Yes, we can easily achieve this with simple JSON formulas. Let’s check out how we can configure this and consider few scenarios and formulas.
Navigate to your SharePoint online site -> Select the list for which you want to configure conditions -> Click on New button to open up form window -> Click on Edit Form icon from right top corner -> Select Edit Column option as shown below
Here you will have a list of columns with an option to choose which one you want to show on this form. So if you want some of the fields to be removed from the form or not shown then you just have to uncheck them and save the settings.
If you want to set the condition then click more option icon in front of the column -> Select “Edit Conditional Formula” option -> It will open up the popup where you can add the condition.
Now take an example where I want to show Approver 2 field only when Rent is more than 5000. So I will have the condition as below
=if([$Rent] > 5000, ‘true’, ‘false’)
Rent is the internal name of the column; you have to refer the column in this format [$ColumnName]
You can use all regular operators for less than, less than or equal to, greater than, also you can make use of functions like substring, indexOf, etc.
Once done with the formula click on Save on popup and another Save on Edit columns popup window.
That’s how you will be able to show or hide the fields conditionally. These conditions are applicable on all three forms i.e. New, Edit, and view form.
Below are some more examples of formulas for different types columns
- Choice column. Show specific field only when Approval status is cancelled.
=if([$ApprovalStatus] == ‘Cancelled’, ‘true’, ‘false’)
- Number column. If the Rent is less than 5000 then limit approval to first level otherwise include second level approver also.
=if([$Rent] > 5000, ‘true’, ‘false’)
- Person or Group column. If Agent is a department Head, then no need of approval
=if([$Agent.email] == ‘sarvesh.shinde@rlhn.onmicrosoft.com’, ‘true’, ‘false’)
=if([$Agent.email] == @me, ‘true’, ‘false’)
- Yes/No type column. If furniture needed, then add furniture budget
=if([$FurnitureNeeded] == true, ‘true’, ‘false’)
- How to check null values or empty values in a field. If Approval status is empty, then do not show it.
=if([$ApprovalStatus] == ”, ‘false’, ‘true’)
As you can see, we are able to manage and handle different conditions for different types of columns. You also make combine more conditions together with && or || operators. Having said that there are some column types which are not supported in these types of conditions like currency, location, calculated, managed metadata or choice with multiple selection, etc.
Summary
Using simple formulas, we can show and hide the fields on the form. There is absolutely no need to do heavy customization in any other way. It’s very easy and fast to achieve.
Hope this helps. Thanks for reading.
SharePoint Folder Operations Demo Using PnP JS In React Based SPFx Webpart
Nov 4th
In this article, we will learn how to perform operations like add, copy, move, and delete folders using the PnP library in the SPFx web part. PnPJs is an awesome library that providers wrappers around SharePoint REST API so that we as the developer do not have to write repetitive code and also worry about details on how to pass headers, data, etc. It is not only limited to SharePoint but we can also use it to call graph and office 365 API. As this library comes as an npm package, it can be used for any node js and javascript-based projects. Today we will use it in the context of the SharePoint Framework.
Let’s start by creating an SPFx web part. Go to the command prompt and directory where you want to create your SPFx solution.
Use the below options to create a new SPFx solution. (we will be using React framework, just because it is really cool).
Once the solution is created you can open the project in your favorite editor(mine is VS code).
Now let’s install pnp library, use the below command in the node js command prompt.
For the sake of simplicity, we won’t be using any fancy UI ..we will just create buttons and perform different operations on click of the buttons.
Let’s start making code changes, go-to editor.
Pass SharePoint Context to React component
1. Open src\webparts\foldersdemo\components\IFoldersdemoProps.ts
Create context properties to hold SharePoint context.
2. Go to src\webparts\foldersdemo\FoldersdemoWebPart.ts
Setup PnP in React Component
1. Go to src\webparts\foldersdemo\components\Foldersdemo.tsx
Import library, you can do selective import but for this demo, we will be loading all presets.
2. In the same file, let’s initialize the PnP SP object with context. Add a constructor in your react class.
Add required logic in React component
1. Go to src\webparts\foldersdemo\components\Foldersdemo.tsx
Replace render method with below code,
2. Now let’s add the required method which will be called on respective buttons.
So we are done with changes, let’s test it…run ‘gulp serve’ and open SharePoint workbench.aspx
Let us first see how the library is looking before doing any operations.
Click on Create Folders,
Let us see the results of Create Folders operation. It has created 4 folders.
Click on Rename Folder.
This will rename the folder as specified.
Click on Copy Folder.
The folder has been copied to the destination.
Click on the Move folder.
We can see the folder has been moved.
Conclusion
In this article, we have explored the below concepts.
- SPFx React-based web part
- Using PnPJS library in SPFx web part
- CRUD operations on folders in SharePoint using PnP JS
SharePoint Hosting – How To Fetch Items From SharePoint List To PowerApps Gallery, Calculator?
Oct 7th
In this article, I’m going to demonstrate how Sharepoint List Records are fetched to the PowerApps Gallery Control and, in the gallery we’ll be calculating some values as per the requirement, then those calculated values will be updated again to the List.
STEP 1 – Creating a List
- List Name: Calculation
- ItemName: (Single Line Text)
- Quantity: (Number)
- UnitPrice:(Number)
- Total:(Number)
Create the List as per the above specifications.
Enter some dummy values to the ItemName, Quantity, UnitPrice Columns.
STEP 2 – Working with Power Apps gallery
Go to PowerApps and create a blank canvas app and name it as per the Project Title.
Add a blank vertical Gallery to the Screen and you can rename it as per your need.
Add the Data Source from the SharePoint List to The Gallery Items.
Select the Gallery control and choose the pencil icon to edit the require fields with context to List Data Source.
Put some Controls and change their properties as follows,
- Put a Label Control- Set Text Property-ThisItem.ItemName
- Put a Label Control- Set Text Property-ThisItem.Quantity
- Put a Label Control- Set Text property-ThisItem.UnitPrice
- Put a Text Input Control- Set Default Property:ThisItem.Quantity*ThisItem.UnitPrice
STEP 3 – Function To Update List Items
Add a Button Control to the Screen and rename it as you need.
Write the following functions on button On Select Property,
STEP 4 – Save & Run the Application
Save the Application and run it. The Application runs successfully and will update all the Calculated items from the Gallery to the Share Point List you are working with.
STEP 5 – Checking The List Data Source
Go to Your Share Point List and refresh it. You will see that all the Total columns are updated.
In the above article we successfully did the calculation and updating of calculated Values to the SharePoint List as per the requirements.
