Articles about European Sharepoint Hosting Service
European SharePoint Server 2013 Hosting
SharePoint Hosting – Installing SharePoint Online Management Shell
Feb 4th
SharePoint Online Management Shell is a command-line utility that helps admins and developers to interact with SharePoint sites without Graphical User Interfaces (GUI). This will allow the users to perform automation tasks such as
- Monitoring the sites for unique permissions
- Monitoring the site classification
- Adding/removing site collection administrators
- Creating team sites
- Getting the site usage
- Getting the site users
- And much more.
At first if no SharePoint module has been installed, when connecting to SPO service you might be getting error similar to below.
Steps
There are 2 ways you can install the SharePoint Online Management shell.
- By downloading the exe file from the MSFT link and then running the exe file and follow the on-screen commands.
- By running the PowerShell (with version >5 or newer) command and then follow the prompts on the screen.
In this article, we will look into both PowerShell way and Installer file.
Using Installer file
This is simple and pretty straightforward. Prashant has written detailed steps on how to do it. Please go through the link ‘how to install SharePoint online management shell’ from the references section.
Using PowerShell
For the PowerShell you just have to run the below one line in the PS script pane
You might be getting below prompts.
- At first it needs to have NuGet manager to manage NuGet package repositories and download the required dependencies. It is similar to opening visual studio and using ‘NuGet package manager’ to download and install the required dependencies for successful execution.
Select ‘Yes’.
After that you might be getting below message ‘you are installing from untrusted repository’.
Since the ‘PS Gallery’ is maintained by MSFT you can select ‘Yes’
Step 2
Validate the installation by running the below command. This will check the version of SharePoint online management shell.
Updating to the Latest version
For updating to the latest version in the PowerShell command window just enter the below one line script.
Update-Module -Name Microsoft.Online.SharePoint.PowerShell
Issues
If you are getting an issue similar to below, try running the Powershell as admin and execute the command, or add the parameter ‘-scope currentuser’.
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
SharePoint 2013 Hosting – HostForLIFE.eu :: Wedding Timeline In SPfx
Nov 6th
In this article we will learn about how to implement a wedding timeline plugin in spfx using wow.js, since wowjs provides animated features that are leveraged by the plugin.
Steps
Open a command prompt and create a directory for the SPFx solution.
md spfx-WeddingTimeline
Navigate to the above-created directory.
cd spfx-WeddingTimeline
Run the Yeoman SharePoint Generator to create the solution.
yo @microsoft/sharepoint
Solution Name
Hit Enter for the default name (spfx-WeddingTimeline in this case) or type in any other name for your solution.
Selected choice – Hit Enter
Target for the component
Here, we can select the target environment where we are planning to deploy the client web part; i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
Selected choice – SharePoint Online only (latest).
Place of files
We may choose to use the same folder or create a subfolder for our solution.
Selected choice – same folder.
Deployment option
Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.
Selected choice – N (install on each site explicitly).
Permissions to access web APIs
Choose if the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant.
Selected choice – N (solution contains unique permissions)
Type of client-side component to create
We can choose to create a client-side web part or an extension. Choose the web part option.
Selected choice – WebPart
Web part name
Hit Enter to select the default name or type in any other name.
Selected choice – WeddingTimeline
Web part description
Hit Enter to select the default description or type in any other value.
Framework to use
Select any JavaScript framework to develop the component. Available choices are – No JavaScript Framework, React, and Knockout.
Selected choice – React
The Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
Once the scaffolding process is completed, lock down the version of project dependencies by running the below command:
|
1 |
npm shrinkwrap |
In the command prompt, type the below command to open the solution in the code editor of your choice.
|
1 2 3 4 |
npm i bootstrap npm install --save @types/jquery npm i csstype npm i wowjs |
Include jQuery as a dependency using the default generator.
This method can be used in projects that were created with the out of the box generator by doing the following,
On your SPFx project expand the config folder, edit the json file, look for the externals section and add the following dependency.
|
1 2 3 4 5 6 |
"externals": { "jquery": { "path": "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js", "globalName": "jQuery" } |
Problems I faced
To resolve window.WOW declare like below.
|
1 2 3 4 5 |
declare global { interface Window { WOW:any; } } |
Since the jquery parsing takes more time to complete intiate the wow function after parsing like below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
window.addEventListener('load', this.handleLoad); public handleLoad() { let wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile:true, live: true, scrollContainer: ".content_3f3fd3c2" }); wow.init(); wow.sync(); } |
To import the image in the img tag follow the below model.
|
1 2 3 |
const time01: any = require('./images/time-01.jpg'); <img src={time01} alt="" /> |
To implement the plugin
|
1 2 3 4 5 |
($('.timeLine') as any).timeLine({ mainColor: '#890025', opacity: '0.85', lineColor: '#890025' }); |
Where main color, line color can provide as per our need in WeddingTimeline.tsx
|
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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 |
import * as React from 'react'; //import styles from './WeddingTimeline.module.scss'; import { IWeddingTimelineProps } from './IWeddingTimelineProps'; const time01: any = require('./images/time-01.jpg'); const time02: any = require('./images/time-02.jpg'); const time03: any = require('./images/time-03.jpg'); const time04: any = require('./images/time-04.jpg'); const time05: any = require('./images/time-05.jpg'); import * as $ from 'jquery'; import 'bootstrap/dist/css/bootstrap.css'; require('./css/responsive.css'); require('./css/style1.css'); import 'bootstrap'; import * as CSS from 'csstype'; import { SPComponentLoader } from '@microsoft/sp-loader'; //SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js'); //require('./js/jquery.min.js'); //require('./js/wow.min.js'); //declare var WOW; declare global { interface Window { WOW:any; } } require('./js/timeLine.min.js'); //import WOW from 'wowjs'; //const {WOW} = require('wowjs'); // //require('./timeLine.min.js'); //declare var WOW: any; //import 'wow.js'; import { WOW } from 'wowjs'; window.WOW = WOW; interface Style extends CSS.Properties, CSS.PropertiesHyphen {} var divStyle: Style ={ color:'Red', 'font-size': '30px', 'font-family': 'Engagement,cursive' }; export default class WeddingTimeline extends React.Component<IWeddingTimelineProps, {}> { public componentDidMount(){ /* var wow = new WOW( { boxClass: 'wow', // animated element css class (default is wow) animateClass: 'animated', // animation css class (default is animated) offset: 0, // distance to the element when triggering the animation (default is 0) mobile: true, // trigger animations on mobile devices (default is true) live: true, // act on asynchronously loaded content (default is true) scrollContainer: "#content_3f3fd3c2" // optional scroll container selector, otherwise use window } ); wow.init();*/ // this.functionOne().done( this.functionTwo() ); ($('.timeLine') as any).timeLine({ mainColor: '#890025', opacity: '0.85', lineColor: '#890025' }); window.addEventListener('load', this.handleLoad); } /*public functionOne = ()=> { var r = $.Deferred(); ($('.timeLine') as any).timeLine({ mainColor: '#890025', opacity: '0.85', lineColor: '#890025' }); // Do your whiz bang jQuery stuff here console.log('Function One'); return r; } public functionTwo = ()=> { let wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, live: true, scrollContainer: ".content_3f3fd3c2" }); wow.init(); wow.sync(); // Do your whiz bang jQuery stuff here console.log('Function Two'); return null; }*/ public handleLoad() { let wow = new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile:true, live: true, scrollContainer: ".content_3f3fd3c2" }); wow.init(); wow.sync(); } public render(): React.ReactElement<IWeddingTimelineProps> { return ( <div id="story" className="story-box main-timeline-box"> <div className="container"> <div className="row"> <div className="col-lg-12"> <div className="title-box"> <h2>Our Story</h2> <p style={divStyle}>Designed by Madhan Thurai N.C. </p> </div> </div> </div> <div className="timeLine"> <div className="row"> <div className="lineHeader hidden-sm hidden-xs"></div> <div className="lineFooter hidden-sm hidden-xs"></div> <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 item" > <div className="caption"> <div className="star center-block"> <span className="h3">10</span> <span>May </span> <span>2013</span> </div> <div className="image"> <img src={time01} alt="" /> <div className="title"> <h2>First Meet <i className="fa fa-angle-right" aria-hidden="true"></i></h2> </div> </div> <div className="textContent"> <p className="lead">We met at the wedding of our close friends and immediately found a common language</p> </div> </div> </div> <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 item"> <div className="caption"> <div className="star center-block"> <span className="h3">11</span> <span>Oct</span> <span>2013</span> </div> <div className="image"> <img src={time02} alt="" /> <div className="title"> <h2>First date <i className="fa fa-angle-right" aria-hidden="true"></i></h2> </div> </div> <div className="textContent"> <p className="lead">so a year later our first date happened.</p> </div> </div> </div> <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 item"> <div className="caption"> <div className="star center-block"> <span className="h3">21</span> <span>Aug</span> <span>2013</span> </div> <div className="image"> <img src={time03} alt="" /> <div className="title"> <h2>Proposal <i className="fa fa-angle-right" aria-hidden="true"></i></h2> </div> </div> <div className="textContent"> <p className="lead">Finally in this day we mutually proposed</p> </div> </div> </div> <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 item"> <div className="caption"> <div className="star center-block"> <span className="h3">10</span> <span>Feb</span> <span>2021</span> </div> <div className="image"> <img src={time04} alt="" /> <div className="title"> <h2>Engagement <i className="fa fa-angle-right" aria-hidden="true"></i></h2> </div> </div> <div className="textContent"> <p className="lead">This big day gave an Confirmation</p> </div> </div> </div> <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 item"> <div className="caption"> <div className="star center-block"> <span className="h3">05</span> <span>July</span> <span>2021</span> </div> <div className="image"> <img src={time05} alt="" /> <div className="title"> <h2>My Wedding <i className="fa fa-angle-right" aria-hidden="true"></i></h2> </div> </div> <div className="textContent"> <p className="lead">Finally our dreams comes True </p> </div> </div> </div> </div> </div> </div> </div> ); } } |
timeLine.mins.js
|
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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 |
(function() { var t, e, n, i, o, r = function(t, e) { return function() { return t.apply(e, arguments) } }, s = [].indexOf || function(t) { for (var e = 0, n = this.length; n > e; e++) if (e in this && this[e] === t) return e; return -1 }; e = function() { function t() {} return t.prototype.extend = function(t, e) { var n, i; for (n in e) i = e[n], null == t[n] && (t[n] = i); return t }, t.prototype.isMobile = function(t) { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(t) }, t.prototype.createEvent = function(t, e, n, i) { var o; return null == e && (e = !1), null == n && (n = !1), null == i && (i = null), null != document.createEvent ? (o = document.createEvent("CustomEvent"), o.initCustomEvent(t, e, n, i)) : null != document.createEventObject ? (o = document.createEventObject(), o.eventType = t) : o.eventName = t, o }, t.prototype.emitEvent = function(t, e) { return null != t.dispatchEvent ? t.dispatchEvent(e) : e in (null != t) ? t[e]() : "on" + e in (null != t) ? t["on" + e]() : void 0 }, t.prototype.addEvent = function(t, e, n) { return null != t.addEventListener ? t.addEventListener(e, n, !1) : null != t.attachEvent ? t.attachEvent("on" + e, n) : t[e] = n }, t.prototype.removeEvent = function(t, e, n) { return null != t.removeEventListener ? t.removeEventListener(e, n, !1) : null != t.detachEvent ? t.detachEvent("on" + e, n) : delete t[e] }, t.prototype.innerHeight = function() { return "innerHeight" in window ? window.innerHeight : document.documentElement.clientHeight }, t }(), n = this.WeakMap || this.MozWeakMap || (n = function() { function t() { this.keys = [], this.values = [] } return t.prototype.get = function(t) { var e, n, i, o, r; for (r = this.keys, e = i = 0, o = r.length; o > i; e = ++i) if (n = r[e], n === t) return this.values[e] }, t.prototype.set = function(t, e) { var n, i, o, r, s; for (s = this.keys, n = o = 0, r = s.length; r > o; n = ++o) if (i = s[n], i === t) return void(this.values[n] = e); return this.keys.push(t), this.values.push(e) }, t }()), t = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (t = function() { function t() { "undefined" != typeof console && null !== console && console.warn("MutationObserver is not supported by your browser."), "undefined" != typeof console && null !== console && console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.") } return t.notSupported = !0, t.prototype.observe = function() {}, t }()), i = this.getComputedStyle || function(t) { return this.getPropertyValue = function(e) { var n; return "float" === e && (e = "styleFloat"), o.test(e) && e.replace(o, function(t, e) { return e.toUpperCase() }), (null != (n = t.currentStyle) ? n[e] : void 0) || null }, this }, o = /(\-([a-z]){1})/g, this.WOW = function() { function o(t) { null == t && (t = {}), this.scrollCallback = r(this.scrollCallback, this), this.scrollHandler = r(this.scrollHandler, this), this.resetAnimation = r(this.resetAnimation, this), this.start = r(this.start, this), this.scrolled = !0, this.config = this.util().extend(t, this.defaults), null != t.scrollContainer && (this.config.scrollContainer = document.querySelector(t.scrollContainer)), this.animationNameCache = new n, this.wowEvent = this.util().createEvent(this.config.boxClass) } return o.prototype.defaults = { boxClass: "wow", animateClass: "animated", offset: 0, mobile: !0, live: !0, callback: null, scrollContainer: null }, o.prototype.init = function() { var t; return this.element = window.document.documentElement, "interactive" === (t = document.readyState) || "complete" === t ? this.start() : this.util().addEvent(document, "DOMContentLoaded", this.start), this.finished = [] }, o.prototype.start = function() { var e, n, i, o; if (this.stopped = !1, this.boxes = function() { var t, n, i, o; for (i = this.element.querySelectorAll("." + this.config.boxClass), o = [], t = 0, n = i.length; n > t; t++) e = i[t], o.push(e); return o }.call(this), this.all = function() { var t, n, i, o; for (i = this.boxes, o = [], t = 0, n = i.length; n > t; t++) e = i[t], o.push(e); return o }.call(this), this.boxes.length) if (this.disabled()) this.resetStyle(); else for (o = this.boxes, n = 0, i = o.length; i > n; n++) e = o[n], this.applyStyle(e, !0); return this.disabled() || (this.util().addEvent(this.config.scrollContainer || window, "scroll", this.scrollHandler), this.util().addEvent(window, "resize", this.scrollHandler), this.interval = setInterval(this.scrollCallback, 50)), this.config.live ? new t(function(t) { return function(e) { var n, i, o, r, s; for (s = [], n = 0, i = e.length; i > n; n++) r = e[n], s.push(function() { var t, e, n, i; for (n = r.addedNodes || [], i = [], t = 0, e = n.length; e > t; t++) o = n[t], i.push(this.doSync(o)); return i }.call(t)); return s } }(this)).observe(document.body, { childList: !0, subtree: !0 }) : void 0 }, o.prototype.stop = function() { return this.stopped = !0, this.util().removeEvent(this.config.scrollContainer || window, "scroll", this.scrollHandler), this.util().removeEvent(window, "resize", this.scrollHandler), null != this.interval ? clearInterval(this.interval) : void 0 }, o.prototype.sync = function() { return t.notSupported ? this.doSync(this.element) : void 0 }, o.prototype.doSync = function(t) { var e, n, i, o, r; if (null == t && (t = this.element), 1 === t.nodeType) { for (t = t.parentNode || t, o = t.querySelectorAll("." + this.config.boxClass), r = [], n = 0, i = o.length; i > n; n++) e = o[n], s.call(this.all, e) < 0 ? (this.boxes.push(e), this.all.push(e), this.stopped || this.disabled() ? this.resetStyle() : this.applyStyle(e, !0), r.push(this.scrolled = !0)) : r.push(void 0); return r } }, o.prototype.show = function(t) { return this.applyStyle(t), t.className = t.className + " " + this.config.animateClass, null != this.config.callback && this.config.callback(t), this.util().emitEvent(t, this.wowEvent), this.util().addEvent(t, "animationend", this.resetAnimation), this.util().addEvent(t, "oanimationend", this.resetAnimation), this.util().addEvent(t, "webkitAnimationEnd", this.resetAnimation), this.util().addEvent(t, "MSAnimationEnd", this.resetAnimation), t }, o.prototype.applyStyle = function(t, e) { var n, i, o; return i = t.getAttribute("data-wow-duration"), n = t.getAttribute("data-wow-delay"), o = t.getAttribute("data-wow-iteration"), this.animate(function(r) { return function() { return r.customStyle(t, e, i, n, o) } }(this)) }, o.prototype.animate = function() { return "requestAnimationFrame" in window ? function(t) { return window.requestAnimationFrame(t) } : function(t) { return t() } }(), o.prototype.resetStyle = function() { var t, e, n, i, o; for (i = this.boxes, o = [], e = 0, n = i.length; n > e; e++) t = i[e], o.push(t.style.visibility = "visible"); return o }, o.prototype.resetAnimation = function(t) { var e; return t.type.toLowerCase().indexOf("animationend") >= 0 ? (e = t.target || t.srcElement, e.className = e.className.replace(this.config.animateClass, "").trim()) : void 0 }, o.prototype.customStyle = function(t, e, n, i, o) { return e && this.cacheAnimationName(t), t.style.visibility = e ? "hidden" : "visible", n && this.vendorSet(t.style, { animationDuration: n }), i && this.vendorSet(t.style, { animationDelay: i }), o && this.vendorSet(t.style, { animationIterationCount: o }), this.vendorSet(t.style, { animationName: e ? "none" : this.cachedAnimationName(t) }), t }, o.prototype.vendors = ["moz", "webkit"], o.prototype.vendorSet = function(t, e) { var n, i, o, r; i = []; for (n in e) o = e[n], t["" + n] = o, i.push(function() { var e, i, s, a; for (s = this.vendors, a = [], e = 0, i = s.length; i > e; e++) r = s[e], a.push(t["" + r + n.charAt(0).toUpperCase() + n.substr(1)] = o); return a }.call(this)); return i }, o.prototype.vendorCSS = function(t, e) { var n, o, r, s, a, l; for (a = i(t), s = a.getPropertyCSSValue(e), r = this.vendors, n = 0, o = r.length; o > n; n++) l = r[n], s = s || a.getPropertyCSSValue("-" + l + "-" + e); return s }, o.prototype.animationName = function(t) { var e; try { e = this.vendorCSS(t, "animation-name").cssText } catch (n) { e = i(t).getPropertyValue("animation-name") } return "none" === e ? "" : e }, o.prototype.cacheAnimationName = function(t) { return this.animationNameCache.set(t, this.animationName(t)) }, o.prototype.cachedAnimationName = function(t) { return this.animationNameCache.get(t) }, o.prototype.scrollHandler = function() { return this.scrolled = !0 }, o.prototype.scrollCallback = function() { var t; return !this.scrolled || (this.scrolled = !1, this.boxes = function() { var e, n, i, o; for (i = this.boxes, o = [], e = 0, n = i.length; n > e; e++) t = i[e], t && (this.isVisible(t) ? this.show(t) : o.push(t)); return o }.call(this), this.boxes.length || this.config.live) ? void 0 : this.stop() }, o.prototype.offsetTop = function(t) { for (var e; void 0 === t.offsetTop;) t = t.parentNode; for (e = t.offsetTop; t = t.offsetParent;) e += t.offsetTop; return e }, o.prototype.isVisible = function(t) { var e, n, i, o, r; return n = t.getAttribute("data-wow-offset") || this.config.offset, r = this.config.scrollContainer && this.config.scrollContainer.scrollTop || window.pageYOffset, o = r + Math.min(this.element.clientHeight, this.util().innerHeight()) - n, i = this.offsetTop(t), e = i + t.clientHeight, o >= i && e >= r }, o.prototype.util = function() { return null != this._util ? this._util : this._util = new e }, o.prototype.disabled = function() { return !this.config.mobile && this.util().isMobile(navigator.userAgent) }, o }() }).call(this), function(t) { t.fn.timeLine = function(e) { "use strict"; var n = t.extend({ myTimeLine: this, mainColor: "", opacity: "0.5", offset: "400", itemAnimateDuration: 2, lineColor: "#DDDDDD", LeftAnimation: "rotateInUpRight", RightAnimation: "rotateInUpLeft" }, e); t(document).ready(function() { function e(t) { return t = t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i), t && 4 === t.length ? "#" + ("0" + parseInt(t[1], 10).toString(16)).slice(-2) + ("0" + parseInt(t[2], 10).toString(16)).slice(-2) + ("0" + parseInt(t[3], 10).toString(16)).slice(-2) : "" } function i(t) { var e = /^#[0-9A-F]{3,6}$/i.test(t); return !e && v ? (console.log("%cWarning!!! Unkown or undefined color format, please set your color format like this example #FFFFFF or #FFF. default color will be set", "font-size: 21px; color: red"), v = !1, [e, "#DDD"]) : [e, t] } function o(t) { var o = i(t)[0], r = "#b50000", s = "#5E0000"; if (o) { var a = t; t && 4 == t.length && (a = t.replace(/[0-9A-F]{1}/gi, "$&$&")); var l = a, c = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/, u = c.exec(l), d = "rgba(" + parseInt(u[1], 16) + "," + parseInt(u[2], 16) + "," + parseInt(u[3], 16) + "," + n.opacity + ")", h = "rgba(" + (parseInt(u[1], 16) - 94 <= 0 ? 0 : parseInt(u[1], 16) - 94) + "," + parseInt(u[2], 16) + "," + parseInt(u[3], 16) + ")"; return [d, e(h)] } return [r, s] } function r(t) { f.eq(t).animate({ bottom: "10px", opacity: 1 }, 2e3) } function s() { p.after('<div class="controll"><i style="font-size: 250px" class="fa fa-play-circle" aria-hidden="true"></i></div>'); var e = h.find(".controll i"); e.click(function() { t(this).fadeOut(200), t(this).parent().fadeOut(200), console.log(this), t(this).parents().eq(1).find("video").get(0).play(), t(this).parents().eq(1).find("video").on("ended", function() { t(this).parent().find(".controll").fadeIn(200), t(this).parent().find(".controll i").fadeIn(200), t(this).get(0).load() }) }), p.click(function() { t(this).get(0).paused || (t(this).get(0).pause(), t(this).parent().find(".controll").fadeIn(200), t(this).parent().find(".controll i").fadeIn(200), console.log(this)) }) } function a() { var e = o(n.mainColor)[0], r = o(n.mainColor)[1]; for (u = 0; u < h.length; u++) u % 2 == 0 ? h.eq(u).addClass("wow " + n.LeftAnimation).attr("data-wow-offset", n.offset).attr("data-wow-duration", n.itemAnimateDuration + "s") : h.eq(u).addClass("wow pull-right " + n.RightAnimation).attr("data-wow-offset", n.offset).attr("data-wow-duration", n.itemAnimateDuration + "s"); n.myTimeLine.find(".pull-right").attr("data-wow-delay", "0.5s"), h.find(".title").css({ backgroundColor: e }), h.find(".star").css({ backgroundColor: e }), f.css({ bottom: d + "px", opacity: 0, cursor: "pointer" }), f.click(function(e) { t(e.target).closest(".caption").find(".textContent").stop(!0, !1), t(e.target).closest(".caption").find(".textContent").hasClass("in") ? (t(e.target).closest(".caption").find(".textContent").slideUp(400).removeClass("in"), t(e.target).closest(".caption").find(".title i").css({ transform: "rotate(0deg)" })) : (t(e.target).closest(".caption").find(".textContent").slideDown(400).addClass("in"), t(e.target).closest(".caption").find(".title i").css({ transform: "rotate(90deg)", transition: "transform 0.4s ease-out" })) }), m.find("p").css({ borderLeft: "5px solid " + e }), m.hide(), t("head").append("<style>.timeLine .row .item .caption .image .title:before{border-top: 10px solid " + r + "}.timeLine .row .item .caption .star:before{border-right: 10px solid " + r + "}.timeLine .row .pull-right:before,.timeLine .row .item:before{border: 3px solid " + e + "}.timeLine .row .lineHeader:after{background-color: " + i(n.lineColor)[1] + "}.timeLine .row .lineHeader:before,.timeLine .row .lineFooter:before{color: " + i(n.lineColor)[1] + "}</style>"), (new WOW).init() } function l() { for (c = 1e3 * (n.itemAnimateDuration - .75 * n.itemAnimateDuration), t(window).scroll(function() { for (u = 0; u < f.length; u++) "visible" != h.eq(u).css("visibility") || h.eq(u).hasClass("done") || (h.eq(u).addClass("done"), window.setTimeout(r, c, u)) }), u = 0; u < f.length; u++) "visible" != h.eq(u).css("visibility") || h.eq(u).hasClass("done") || (h.eq(u).addClass("done"), window.setTimeout(r, c, u)); s() } var c, u, d = 80, h = n.myTimeLine.find(".item"), f = h.find(".title"), p = h.find("video"), m = h.find(".textContent"), v = !0; a(), window.setTimeout(l, 1e3) }) } }(jQuery); |
Expected Output
Create List Content Type And Its Field Using CSOM
Jun 19th
In this article, we are going to discuss an important and useful feature of SharePoint; i.e., Content Type. As we all know, the content type is the set of columns that we can reuse in all lists and libraries in a site. We are going to create a Content List and its column and will add this content type to all custom lists present in the site. Follow the below steps and code snippets to perform the above action.
Step 1
Set the credential by giving input of user ID and Password for SharePoint.
Step 2
Get the web ysing client context.
Step 3
The function CreateSpContentType () is used for the creation of List content type using the unique ID & Group. Here the title of the content type is set as “Employee Info”.
Step 4
The function CreateSiteField () is used then to create the fields of the content type which will represent the employee details. First, we must create site columns & then we can add it to the content type fields.
Step 5
After Creating the content type and its field, the function AddContentType () is used to attach the content type with all available custom lists in the site.
In this function, first we have to get all custom lists present in the site by using the base id (for custom List the Base Id=100) & then for adding the content type into the list we have to get the content type by using its unique ID which we used previously while creating the content type. (The Property ContentTypesEnabled should set to be true).
|
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 119 120 121 122 123 124 125 126 127 |
using System; using System.Security; using Microsoft.SharePoint.Client; namespace Createcontenttype { class Program { static void Main(string[] args) { #region[Variables] string username = string.Empty; string password = string.Empty; #endregion #region[SP Variables] Web spWeb = null; ContentType contentType = null; #endregion using(ClientContext context = new ClientContext(https: //sharepoint.com/site)) //Enter the site url { SecureString securstr = new SecureString(); password = "1234@abc"; //Enter the password foreach(char ch in password) { securstr.AppendChar(ch); } context.Credentials = new SharePointOnlineCredentials("user.onmicrosoft.com", securstr); //Enter the user id spWeb = context.Site.RootWeb; context.Load(spWeb); context.Load(context.Web); contentType = CreateSpContentType(context, spWeb, contentType); CreateSiteField(context, spWeb, contentType); AddContentType(context, spWeb); Console.WriteLine("Success"); Console.ReadLine(); } } private static ContentType CreateSpContentType(ClientContext context, Web spWeb, ContentType contentType) { try { contentType = spWeb.ContentTypes.Add(new ContentTypeCreationInformation { Name = "Employee Info", Id = "0x0100A33D9AD9805788419BDAAC2CCB37509E", Group = "List Content Types" }); context.ExecuteQuery(); } catch (Exception e) { Console.WriteLine(e.Message); } return contentType; } private static void CreateSiteField(ClientContext context, Web spWeb, ContentType contentType) { #region[Variables] string[] trgtfld = { "EmployeeName", "EmpAddress", "EmpCity", "JoinDate", "EmpGender" }; FieldCollection fields = null; FieldLinkCreationInformation fldLink = null; Field txtFld = null; string TxtFieldAsXML = string.Empty; Field addFld = null; string addFieldAsXML = string.Empty; string cityFieldAsXML = string.Empty; Field cityFld = null; string jdFieldAsXML = string.Empty; Field jdFld = null; string genFieldAsXML = string.Empty; Field genFld = null; #endregion try { fields = spWeb.Fields; context.Load(fields); //Adding site column to site TxtFieldAsXML = @ "<Field Name='EmployeeName' DisplayName='Employee Name' Type='Text' Hidden='False' Group='EmployeeData' />"; txtFld = fields.AddFieldAsXml(TxtFieldAsXML, true, AddFieldOptions.DefaultValue); addFieldAsXML = @ "<Field Name='EmpAddress' DisplayName='EmpAddress' Type='Note' Hidden='False' Group='EmployeeData' />"; addFld = fields.AddFieldAsXml(addFieldAsXML, true, AddFieldOptions.DefaultValue); cityFieldAsXML = @ "<Field Name='EmpCity' DisplayName='EmpCity' Type='Text' Hidden='False' Group='EmployeeData' />"; cityFld = fields.AddFieldAsXml(cityFieldAsXML, true, AddFieldOptions.DefaultValue); jdFieldAsXML = @ "<Field Name='JoinDate' DisplayName='JoinDate' Type='DateTime' Hidden='False' Group='EmployeeData' />"; jdFld = fields.AddFieldAsXml(jdFieldAsXML, true, AddFieldOptions.DefaultValue); genFieldAsXML = @ "<Field Name='EmpGender' DisplayName='EmpGender' Type='Choice' Hidden='False' Group='EmployeeData' Format='Dropdown'>" + "<CHOICES>" + "<CHOICE>Male</CHOICE>" + "<CHOICE>Female</CHOICE>" + "</CHOICES>" + "</Field>"; genFld = fields.AddFieldAsXml(genFieldAsXML, true, AddFieldOptions.DefaultValue); context.Load(fields); foreach(var fld in trgtfld) { try { contentType = spWeb.ContentTypes.GetById("0x0100A33D9AD9805788419BDAAC2CCB37509E"); fldLink = new FieldLinkCreationInformation(); fldLink.Field = context.Web.AvailableFields.GetByInternalNameOrTitle(fld); contentType.FieldLinks.Add(fldLink); contentType.Update(false); } catch (Exception e) { Console.WriteLine(e); } context.ExecuteQuery(); } } catch (Exception e) { Console.WriteLine(e); } } private static void AddContentType(ClientContext context, Web spWeb) { #region[Variables] ListCollection spListColl = null; ContentType spContentType = null; #endregion try { spListColl = spWeb.Lists; context.Load(spListColl); context.ExecuteQuery(); foreach(List list in spListColl) { try { if (list.BaseTemplate == 100) { list.ContentTypesEnabled = true; spContentType = spWeb.ContentTypes.GetById("0x0100A33D9AD9805788419BDAAC2CCB37509E"); list.ContentTypes.AddExistingContentType(spContentType); list.Update(); spWeb.Update(); context.ExecuteQuery(); } } catch (Exception e) { Console.WriteLine(e); } } } catch (Exception e) { Console.WriteLine(e); } } } } |
After running the code, we can check the content type in Site content type option under site setting. Then clicking on the content type title (Employee Info), we can check the field of content type. Please refer to the below image for better reference.
SharePoint 2013 Hosting – HostForLIFE.eu :: You May Also Be Interested In
Jun 15th
When we like or comment on any post in SharePoint Modern Communication Site, this section will be visible on that post (below the post content) if it is enabled on that post. We can simply turn this On or Off for that post, as per our need while editing.
If we totally want to remove this section/feature from the communication site, then you may deactivate this Site Feature “SharePoint Recommendations”. This feature is by default activated on the Communication Site.
This feature’s id is “780ac353-eaf8-4ac2-8c47-536d93c03fd6”, its internal name is “RecommendedItems” and its display name is “SharePoint Recommendations”.
Either you can deactivate this feature manually from UI or by using the PnP Powershell command.
Disable-PnPFeature -Identity 780ac353-eaf8-4ac2-8c47-536d93c03fd6 -Scope Web -Force
If you don’t want this feature and if you have a Custom Site Design engine, then you can maybe deactivate the feature at the time of provisioning the site (using CSOM in Azure Function or Console Jobs).
ctx.Web.Features.Remove(new Guid(“780ac353-eaf8-4ac2-8c47-536d93c03fd6”), true);
ctx.Load(ctx.Web);
ctx.ExecuteQuery();
Where ctx is the context of current provisioning site collection and “780ac353-eaf8-4ac2-8c47-536d93c03fd6” is “SharePoint Recommendations” site feature id.
SharePoint 2013 Hosting – HostForLIFE.eu :: How to Retrieve Lists from SharePoint using Webservice?
Feb 13th
Today, I will tell you about how to Retrieve Lists from SharePoint using Webservice. This following code will give you all the list from SharePoint with the details of particular list. You can change BaseType to get different types of list from SharePoint.
|
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 |
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Xml; using System.Xml.Linq; using System.Windows.Forms; using System.Resources; using System.Web; //To add below namespace you should add below reference library. //1.)Microsoft.SharePoint.Client.dll //2.)Microsoft.SharePoint.Client.Runtime.dll using Microsoft.SharePoint; //add this namespace to access SharePoint Web Service. using Microsoft.SharePoint.Client; //add this namespace to access SharePoint Web Service. using Microsoft.SharePoint.Utilities; //add this namespace to access SharePoint Web Service. namespace WindowsFormsApplication1 { public partial class COM : System.Windows.Forms.Form { string url = string.Empty; string listName = string.Empty; string listGUid = string.Empty; string rowLimit = ""; System.Net.NetworkCredential creadential = new System.Net.NetworkCredential("username", "password", "domain"); public COM() { InitializeComponent(); } private void btngetlist_Click(object sender, EventArgs e) { string listname = string.Empty; if (txturl.Text == string.Empty) { MessageBox.Show("Please Insert Valid Site URL!", "URL Needed!", MessageBoxButtons.OK, MessageBoxIcon.Information); } else { url = txturl.Text; List<string> lst = getlist(url); } } public List<string> getlist(string url) { string listname = string.Empty; ListWebService.Lists lst = new ListWebService.Lists(); List<string> listnames = new List<string>(); lst.Url = url + "/_vti_bin/Lists.asmx"; lst.Credentials = creadential; try { XmlNode xnode = lst.GetListCollection(); XmlNodeList node = xnode.SelectNodes("*[@BaseType=1]"); //change BaseType to retrieve Different list. foreach (XmlNode list in node) { //if(Convert.ToInt32(list.Attributes["BaseType"]) == 0) listname = list.Attributes["Title"].Value.ToString(); combolist.Items.Add(listname); } } catch (Exception ex) { MessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error); } return listnames; } public void combolist_SelectedIndexChanged(object sender, EventArgs e) { ListWebService.Lists lst = new ListWebService.Lists(); url = txturl.Text; lst.Credentials = creadential; try { listName = combolist.SelectedItem.ToString(); XmlNode xnode = lst.GetListCollection(); XmlNode list = lst.GetList(listName); XmlNodeList visibleColumns= list.SelectNodes("Fields/Field[not(@Hidden) or @Hidden='FALSE']"); System.Xml.XmlNode nodlistview = lst.GetListAndView(listName, string.Empty); XmlDocument xmldoc = new XmlDocument(); xmldoc.LoadXml(nodlistview.OuterXml); XmlNodeList xmllist = xmldoc.GetElementsByTagName("ViewFields"); xmldoc = new System.Xml.XmlDocument(); System.Xml.XmlElement query = xmldoc.CreateElement("Query"); System.Xml.XmlElement viewfield = xmldoc.CreateElement("ViewFields"); xnode = xmllist.Item(0); string queryinnerxml = string.Empty; for (int i = 0; i < xnode.ChildNodes.Count; i++) { if (xnode.ChildNodes[i].Attributes["Name"].Value != "Edit") { queryinnerxml = queryinnerxml + "<FieldRef Name=\"" + xnode.ChildNodes[i].Attributes["Name"].Value + "\" />"; } } viewfield.InnerXml = queryinnerxml.Trim(); System.Xml.XmlElement queryoption = xmldoc.CreateElement("QueryOptions"); queryoption.InnerXml = "<IncludeMandatoryColumns>TRUE</IncludeMandatoryColumns>"; System.Xml.XmlNode nodelistitem = lst.GetListItems(listName, string.Empty, query, viewfield, rowLimit, queryoption, null); System.IO.StringReader xmlsr = new System.IO.StringReader(nodelistitem.InnerXml); DataSet ds = new DataSet(); ds.ReadXml(xmlsr); listgrid.DataSource = ds.Tables[1]; } catch (Exception ex) { MessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error); } } } } |
SharePoint 2013 Hosting Recommendation
HostForLIFE.eu’s SharePoint 2013 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 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 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 2013 plans as well as dedicated SharePoint 2013 Foundation options.
