European Sharepoint 2013 Hosting Blog
Articles about European Sharepoint Hosting Service
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.
SharePoint Hosting – Sharepoint List Column Re-Ordering In New Item Form Or Edit Item Form
Sep 30th
To re-order SharePoint List items in New Item Form, follow the below steps,
Step 1
Go to the particular SharePoint list setting page.
Step 2
Scroll down to the bottom of the settings page, just above the views option, you will see the ‘Column ordering‘ heading.
Step 3
Click on it and we can change the column ordering number as seen in the below picture.
Step 4
Once done, click ‘OK’, same order will be reflected in the New Item form.
In case you have any concerns or queries, feel free to reach out.
SharePoint Hosting – How To Apply Styles Dynamically Using JavaScript In SPFx Web Part
Sep 23rd
In this blog, we will learn how we can apply styles dynamically based on the color change in the property panel of the SPFx web part.
Requirement
We need to apply the color of text based on the selected color in the property panel. In the property panel, we have added a text box, where users will add color code or a color name that they want as the text color.
Implementation
We have applied the class name for the div where we are showing texts and in the CSS file, we need to define the color of text using variables.
The CSS will be as below,
And our HTML will be as below,
As we can see, in the CSS we have used variables for applying the color. Now we will assign the value to this variable.
First, we will get the value from the text box of the property panel as below,
Now we will use colorName variable, to assign a color to the style’s variable.
So here we created a new element for style and append this element in the head element of the page.
Whatever value we assign to the variable – projectTitleColor, it will assign to the color style in the CSS file.
Here in this example, we have used a CSS file, but you can also use the same steps for scss as well.
This is how we can apply dynamic styles. Hope this blog will be helpful!
SharePoint Hosting – How To Trigger MS Flow From SPFx Web Part And Return Result Back To SPFx Web Part?
Sep 15th
In this article, we will learn how can we call MS Flow from the SPFx web part and have MS Flow return the result back to the SPFx web part.
There was a third-party API, which we were not able to access from the SPFx web part because of some security reasons. API was access
ible from MS Flow. So, we call API from MS Flow, triggered MS Flow from the SPFx web part, and return the result back to the SPFx web part.
Implementation – Set up MS Flow
Follow the below steps,
Step 1
Go to https://flow.microsoft.com/.
Step 2
Click on My Flows from the left panel and click on the New flow dropdown. Select the Instant cloud flow option as shown below screenshot.
Step 3
Now select When an HTTP request is received option and click on Create button.
Step 4
Now enter the request body in the JSON format for the parameters you need to pass from the SPFx web part.
Here I have copied sample JSON schema,
Step 5
Now click on the add action button and add HTTP action.
Step 6
We will use HTTP action to call our third-party API. Now select Method, add URI, add headers and body in HTTP action.
Step 7
Now click on add new action for compose as shown in the below screenshot.
Step 8
Now in a compose action, select body from HTTP action as shown in the below screenshot.
Step 9
Now add a new action for the response.
Step 10
In a response action, select values as below,
Step 11
Now save the flow. Once you save the flow, you will be able to see the URL in the first action. Copy this URL, we will use this URL in our SPFx web part to trigger flow:
Setup SPFx web part
Follow the below steps,
Here my web part’s name is Projects,
Step 1
In the props.ts file of your SPFx web part, declare a new property for context.
Step 2
Now in the projectsWebPart.ts file, assign current context to context property as below,
Step 3
Now in a projects.tsx file, we will trigger flow and get the response. So to call a flow, we will prepare a JSON string which we will use as a parameter while calling flow. In our flow above, we have two parameters, FromDate and ToDate. So we will generate a JSON string as below:
Step 4
Then we will create a header as below,
Step 5
Now we will use post request using context.httpClient.post and use the URL which we get from flow as API.
Here is the final code to trigger flow and get the result as a response,
Step 6
The above method will return the response from the MS Flow.
Conclusion
This is how we can trigger MS Flow from the SPFx web part and return the result back to SPFx we part. I hope this article will be helpful for you!
SharePoint Hosting – Copy Modern Page Within The Folder Using JSOM
Sep 9th
In this blog, we are going to discuss how to copy a modern page within the same folder of a site collection. You can do it manually or programmatically. Follow the below steps to copy a client-side page.
How to Copy a page manually?
Go to your site’s Site Pages. Select a page.
Click on “Three dots” to present the right side of a page as shown below. Then click on “Copy to”.
A pop-up will open, select the Folder, then click on “Copy here”.
How to Copy a Modern page programmatically using JavaScript
Follow the below JavaScript code to copy a modern page in the same folder of a site collection.
|
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 |
var fileLibName = “home.aspx”; var newFileName = “Test.aspx "; var fileContentUrl = < enter your siteUrl > +"/_api/web/GetFileByServerRelativeUrl('" + fileName + "')/$value"; var restUrl = < enter your siteUrl > +"/_api/web/GetFolderByServerRelativeUrl('" + folderName + "')/Files/Add(url='" + newFileName + "',overwrite=true)"; $(function() { $.ajax({ url: < enter your siteUrl > +"/_api/contextinfo", type: 'POST', processData: false, headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": $('#__REQUESTDIGEST').val(), }, success: successHandler, error: errorHandler }) }) function successHandler(data, textStatus, jqXHR) { var digest = data.d.GetContextWebInformation.FormDigestValue; var xhr = new XMLHttpRequest(); xhr.open('GET', fileContentUrl, true); xhr.setRequestHeader('binaryStringResponseBody', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status == 200) { var arrayBuffer = this.response; $.ajax({ url: restUrl, method: 'POST', data: arrayBuffer, processData: false, headers: { 'binaryStringRequestBody': 'true', 'Accept': 'application/json;odata=verbose;charset=utf-8', 'X-RequestDigest': digest } }).done(function(postData) { Console.log(“Copied successfully”); }).fail(function(jqXHR, errorText) { Console.log(“Error”); }); } } xhr.send(); } function errorHandler(xhr, ajaxOptions, thrownError) { var msg = "FAILED: " + xhr.responseText; console.log(msg); } |
The original page
The copied Page
We can conclude that this copy feature will help a user copying a page with all the contents present inside the page. Hence, we have done it programmatically to make this easier and more effective.
SharePoint Hosting – Common CSS for multiple SPFx Web Parts
Sep 2nd
A SharePoint Framework (SPFx) solution may contain multiple web parts. In real-world scenarios, it does include numerous web parts and extensions. In most cases, we need to apply a common look and feel to all of these components.
In this article, we will explore how to share a CSS between multiple SPFx components (e.g. web parts and extensions).
Why common CSS?
As we develop the SPFx web part (I am taking an example of the React-based web part), we keep adding multiple React components to it each handling a specific business component. Each component has got its own SCSS to apply styling to the component.
As we place SPFx components on the SharePoint page, they should have a common look and feel. E.g., a boxed border for all web parts, a web part heading, and text with a certain font, size, and color, etc. To render these common requirements, we should have a common CSS that can be shared by all React components and other web parts (and their React components) as well.
Development Approach
I have seen a common practice by various developers to write a common CSS (for e.g. common.css file) and upload it to Style library of SharePoint site.
This common.css file is then injected on each SharePoint site using SPFx extension application customizer using SPComponentLoader.loadCss something like below:
The SPFx web part component can then assume the existence of above pre-loaded CSS and use the css classes as below:
I will not argue here if it is the correct approach and I will leave it up to individuals by respecting their approach.
Shared CSS approach
We can have a folder named Shared and a file as shared.module.scss
Update the web part css to use the Shared css. (For e.g., src\webparts\commonCssDemo\components\CommonCssDemo.module.scss)
Update the web part’s render method to use the shared css class.
This shared CSS can be used by all components in the SPFx solution.
Benefits of Shared CSS
Below are the benefits of using shared CSS:
- All CSS can be controlled at a centralized location
- Lesser maintenance
- Individual web part/component does not need a CSS update
