Showing posts from 2014

JSLink expand collapse documents

the expand/collapse is for each folder in the doc lib
note: you need to change the view to flat insead of folders (edite view -> style)

sample and example, with nano scroller, from my onedrive!254&authkey=!ACwGD9PzPMxqle0&ithint=file%2cjs

i just followed this fiddle

and this is my extra css
.DocumentsZone { border-top: 1pxsolid#d4d4d4}
.docs-title-wrapper { margin: 20px020px;} {display:inline-block; }
.docs-title-wrapperinput{ border: none;width: 23px;height: 23px;min-width: 0;vertical-align: top;margin-top: 7px;background: url('/PublishingImages/+.png');}
.docs-wrapperul {list-style:none;}

JSLink Royal Slider Tutorial

if you havn't, take a look at the basic tutorial

the basic thing about royal slider is the wrapper
<divid="Slider"class="royalSlider rsDefault">

therefor the most logical solution is to use the Header-Item-Footer architecture.
and since I like to capsulate everything I do so here is my basic object

var jsLinkRoyalSlider = {};

jsLinkRoyalSlider.HeaderOverrideFun = function (ctx) {
    return'<div id="Slider" class="royalSlider rsDefault">';

jsLinkRoyalSlider.ItemOverrideFun = function (ctx) {

jsLinkRoyalSlider.FooterOverrideFun = function (ctx) {

jsLinkRoyalSlider.Constuctor = function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = jsLinkRoyalSlider.HeaderOverrideFun;
    overrideCtx.Templates.Item = jsLinkRoyalSlider.ItemOverrideFun;

JS Link Tutorial, Sharepoint 2013

there are many suppose to be tutorial about JSLink, but none start form the beginning
some history

basically JSLink is the cliend side way of data-binding and rendering you sharepoint things to ... well it can be sharepoint lists and libraries and it can be your pages.

it works like this, the moment you put a url to your js file the item / field / webpart sends all of its data to the client and run your js

so what do we have? well best putted is this image from this blog:

this means that each part you see here is actually a JS function that accepts the context with all the data and returns some HTML

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = HeaderOverrideFun;
    overrideCtx.Templates.Item = ItemOverrideFun;
    overrideCtx.Templates.Footer = FooterOverrideFun;

how to add ScriptEditorWebPart to PageLayout

the simple secret is that the ID of the webpart MUST be a guid, example


Sharepoint error while uploading file to masterpages gallery

the error:
Server error: The URL is invalid. It may refer to a nonexistent file or folder or refer to a valid file that is not in the current Web

כתובת ה- URL‏ '_catalogs/masterpage/tryAutoPromo2.aspx' אינה חוקית. ייתכן שהיא מפנה לקובץ או לתיקיה שאינם קיימים או מפנה לקובץ או לתיקיה חוקיים שאינם נמצאים באתר הנוכחי.
guess what? i just added 2 webparts with the same id

ng-repeat working with JSON objects

today i had quite  a fight vs ng-repeat while trying to loop over some json objects
i'll just sum it cause in the end its quite easy. you can try it yourself, I prepared a little jsbon for it:,output

1 - simple array
this is just for the sake of the example, when your object in an array, ngRepeat looks like this
<divng-init="friends = ['Jhonny','Jessy','Marky']">
    <ling-repeat="friend in friends">

2 - array of json objects
this is where you can use the power of parameter with ngRepeat
<divng-init="friends = [{name:'John', age:25, gender:'boy'},
       {name:'Jessie', age:30, gender:'girl'},
       {name:'Patrick', age:40, gender:'boy'}]">
    <ling-repeat="friend in friends">
      {{}} who is {{friend.age}} ye…