European Sharepoint 2013 Hosting Blog
Articles about European Sharepoint Hosting Service
SharePoint Hosting – Global Navigation In Modern SharePoint Using SPFx, PnP And Fluent UI
Jul 22nd
Modern SharePoint architecture gives fantastic OOTB global navigation, and hub site navigation has amazing potential to maintain consistency throughout the portal. Then why do we need to develop custom global navigation in modern SharePoint sites?
Let us talk about the business scenario.
Nowadays, a number of organizations are migrating classic intranet portals to modern sites. Many of them have implemented custom global navigation in a classic environment with a number of links and complex tree structures.
Employees are habitual with this global navigation. So, many organizations prefer similar global navigation in Modern SharePoint sites.
Steps
- Configure Terms in Term Stores
- Create Solution for Application Customizer
- Import Required Packages
- Create React Component
- Add React Component Reference to Application Customizer
- Get Terms using PnP
- Render Terms using Command Bar and styling
- Test Solution
Step 1 – Configure Terms in Term Store.
Go to URL : https://<TenantName>-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/termStoreAdminCenter
Create Term Group.
- Copy Group GUID and Paste it into one document
Create Term Set inside created Term Group
- Enable Use Term set for Site Navigation
- Copy term Set Id and Paste it in one document.
Create Terms Inside create Term Sets.
Step 2 – Create SPFx Solution for Application Customizer
Open Node command Prompt.
Go to your physical location where you want to create a solution.
Once all required packages are installed then you will get the below message.
open Code in visual studio code by typing below one line code in node command prompt.
The solution structure looks like the ad below,
Step 3 – Import required packages from npm
Install PnP npm package,
Install React Fluent UI Package,
Install react and react Dom and Its Dev Dependencies.
Open package.json file which should look like as below,
package.json
Step 4 – Create React Component
Create new folder called “Components” to “..src\extensions\gobalNavigationBar”.
Create 3 files inside the components folder.
- GlobalNav.tsx
- IGlobalNavProps.ts
- IGlobalNavState.ts
Add below code to IGlobalNavProps.ts
,
Add below code to IGlobalNavState.ts,
Add below code to IGlobalNav.tsx,
Step 5 – Add React Component Reference to Application Customizer
Open GobalNavigationBarApplicationCustomizer.ts file and add the below code.
GobalNavigationBarApplicationCustomizer.ts
Step 6: Get Terms using PnP
Open GlobalNav.tsx file and do the below changes.
GlobalNav.tsx
Add below references to the file.
Update below code to GlobalNav.tsx.
Update componentdidmount() method with below code in GlobalNav.tsx.
Step 7 – Render Terms using Command Bar
Open GlobalNav.tsx file.
Add below code before default class.
Create new method menuItems() in GlobalNav.tsx file.
Update render() method in GlobalNav.tsx file.
Step 8 – Test Solution
Open “../config/serve.json” file and update a couple of properties.
Update pageUrl Property and Properties,
Run below command in Visual Studio Code Terminal.
Copy URL which is highlighted in yellow and paste it into the browser.
Conclusion
We have implemented the SPFx solution and get terms from the term store using PnP and render items in the command bar which is fluent UI control.
SharePoint Hosting – Use ULS Log Viewer With SharePoint Server 2016
Jul 15th
SharePoint 2016 provides diagnostic logging services to debug and isolate the issues among the farm. we will configure it from monitoring section in Central Administration. As part of it, we will specify the situation wherever the trace logs are going to be stored. In production, it’ll be a decent plan to stay it in a high capacity disk.
Once logging has been in place, it’ll produce the log files in real time, depending upon the severity of the events. we will go to the log location and find the recently updated log file to work on an existing issue in the farm.
However, opening it up in a notepad is going to create a tough time isolating the error as it is flooded with event logs.
To alleviate this issue, we can make use of a log viewer. There were many log viewers available for SharePoint 2013, however, not all of them are reusable with SharePoint 2016. One of the log viewers, intended for SharePoint 2013 but can be used with SharePoint 2016, is the ULS log viewer from Microsoft which can be downloaded from here. ULS stands for Unified Logging Service.
Once the log viewer is installed and opened, it will ask for the log file location from which the log files should be picked up. Specify the log folder path and click on OK.
This will load the logs into the ULS log viewer and we can easily browse through it to isolate the issues.
We can also find the issues by severity. Clicking on the severity icons in the top menu bar will highlight the issue accordingly. Critical issues will be highlighted, as shown below. This helps to identify and pick the needed ones from the large pool of event logs.
SharePoint 2016 Hosting Recommendation
HostForLIFE.eu’s SharePoint 2016 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2016 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2016 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2016 plans as well as dedicated SharePoint 2016 Foundation options.
SharePoint 2013 Hosting – HostForLIFE :: How To Copy Image From One List To Another Using Flow?
Jul 12th
I was making a flow that would copy the items with their images after that I found the image column was not visible to Flow. Here I am trying to achieve this using a different scenario.
Let’s see how we can handle this.
Here I will show you this step-by-step process.
Create Hyperlink/Picture column in both lists remain this as Hyperlink type
Create a hyperlink /Picture column in both source list and destination list first keep the type as hyperlink the reason is if we make it as Picture instead of Hyperlink it will not visible to flow.
Source list column,
Destination list column,
Add some Image links to the source list column
Add an image, link as Hyperlink into the source list Hyperlink/Picture column.
It will look like a hyperlink.
Create a Flow to perform this task
Create a Flow choose trigger as “Manually trigger a Flow” in the next step add the “Get Items” action.
Then add “create Item” provide Site name and list name now you will see the various column names including the Hyperlink/Picture column now provide columns with the correspondence value.
Save it.
Run the flow,
Open the destination list here we will see the image link,
Then make the Image column type picture type and see the result
After a successful run of Flow, we will find that the Image link is there, then we have to Go to list setting ->edit column then make it as a Picture.
Then see the result.
SharePoint 2013 Hosting – HostForLIFE.eu :: Working With SharePoint And ChartJS
Jul 8th
In this post, we will see how we can represent SharePoint data in graphical form. Now, Create a custom SharePoint list ‘TaskDetails’ with the below details.
Column Name Type
Title Single line
status Choice
Add list items into ‘TaskDetails’.
Then add the below HTML elements on the page. <div>
|
1 2 3 |
<canvas id="AssetStatus" width="500" height="500"></canvas> </div> <div id="chartjs-legend" class="noselect" ></div> |
Add reference for jQuery and ChartJS plugin.
|
1 2 |
<script type="text/javascript" src="jquery-1.7.2.min.js"> </script> <script type="text/javascript" src="Chart.js"></script> |
Code for getting SharePoint ‘TaskDetails’ list data using Rest API.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$.ajax({ url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items", type: "Get", headers: { "accept": "application/json;odata=verbose", }, success: function (data) { LoadChart(data); }, error: function (err) { //show error } }); |
Convert data into chartJS dataset and load the chart.
|
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 |
var LoadChart = function (data) { var items = []; var statuses = []; var chartData = []; var temp = ""; //Loop through items to find unique statuses for (var i = 0; i < data.d.results.length; i++) { items.push(data.d.results[i]); if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) { continue; } temp = data.d.results[i].status; statuses.push(temp); } function findStatus(arg) { return function (items) { return items.indexOf(arg) > -1; } } var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"]; for (var i = 0; i < statuses.length; i++) { var tempCount = items.filter(findStatusInData(statuses[i])).length; var object = { value: tempCount, color: clrs[i], label: statuses[i] } chartData.push(object); } function findStatusInData(arg) { return function (items) { return items.status.indexOf(arg) > -1; } } var ctx = document.getElementById('AssetStatus').getContext("2d"); var chart = new Chart(ctx).Doughnut(chartData, {}); document.getElementById("chartjs-legend").innerHTML = chart.generateLegend(); } |
And this is the output:
The integrated code will be as below.
|
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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"> </script> <script type="text/javascript" src="Chart.js"></script> <script type="text/javascript" > $.ajax({ url: "<Add SharePoint Site Url>/_api/Web/Lists/GetByTitle('TaskDetails')/items", type: "Get", headers: { "accept": "application/json;odata=verbose", }, success: function (data) { LoadChart(data); }, error: function (err) { //show error } }); var LoadChart = function (data) { var items = []; var statuses = []; var chartData = []; var temp = ""; //Loop through items to find unique statuses for (var i = 0; i < data.d.results.length; i++) { items.push(data.d.results[i]); if (statuses.filter(findStatus(data.d.results[i].status)).length > 0) { continue; } temp = data.d.results[i].status; statuses.push(temp); } function findStatus(arg) { return function (items) { return items.indexOf(arg) > -1; } } var clrs = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"]; for (var i = 0; i < statuses.length; i++) { var tempCount = items.filter(findStatusInData(statuses[i])).length; var object = { value: tempCount, color: clrs[i], label: statuses[i] } chartData.push(object); } function findStatusInData(arg) { return function (items) { return items.status.indexOf(arg) > -1; } } var ctx = document.getElementById('AssetStatus').getContext("2d"); var chart = new Chart(ctx).Doughnut(chartData, {}); document.getElementById("chartjs-legend").innerHTML = chart.generateLegend(); } </script> <style type="text/css"> ol, ul { list-style: none; margin: 0; padding: 0; text-align: center; } li { display: inline-table; } .noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #chartjs-legend { position: absolute; width: 100%; bottom: 10%; } #chartjs-legend li { cursor: pointer; margin: 10px 4px; } #chartjs-legend li span { position: relative; padding: 6px 20px; border-radius: 13px; color: white; z-index: 2; } </style> <meta charset="utf-8" /> <title></title> </head> <body> <div> <canvas id="AssetStatus" width="500" height="500"></canvas> </div> <div id="chartjs-legend" class="noselect" ></div> </body> </html> |
Refer to the attached resources for more.
SharePoint 2013 Hosting – HostForLIFE :: SharePoint SharePoint Site Templates
Jul 1st
If you want to create a new SharePoint site using the Client Object Model, you can use the class WebCreationInformation to specify the site’s properties and then create it by adding the site to the Web.
However, it is required to pass a unique TemplateType as a parameter. This parameter is a string and must match with one of the names of the available templates.
To get the list of all available templates, you can run the command Get-SpoWebTemplate in PowerShell. The table below gives an overview of all available templates.
As the libraries contained in the package Microsoft.SharePoint online.CSOM doesn’t provide any enumerator for the available templates. I have created the following snippet.