Posts

Showing posts from December, 2014

JSLink expand collapse documents

Image
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
https://onedrive.live.com/redir?resid=949DC4EDBFFD4738!254&authkey=!ACwGD9PzPMxqle0&ithint=file%2cjs

i just followed this fiddle http://jsfiddle.net/hungerpain/eK8X5/7/

and this is my extra css
.DocumentsZone { border-top: 1pxsolid#d4d4d4}
.docs-title-wrapper { margin: 20px020px;}
.docs-title-wrapperh2.ms-webpart-titleText {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 http://bresleveloper.blogspot.co.il/2014/12/js-link-tutorial-sharepoint-2013.html

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) {
    return'</div>';
};

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

JS Link Tutorial, Sharepoint 2013

Image
there are many suppose to be tutorial about JSLink, but none start form the beginning
some history http://bresleveloper.blogspot.co.il/p/evolution.html

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:
http://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

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

<WebPartPages:ScriptEditorWebPart
    runat="server"
    Content="&lt;script&gt;alert(&#39;hi&#39;);&lt;/script&gt;"
    ID="g_9db1223f_1234_44df_ad5d_e6454520ddfa">
</WebPartPages:ScriptEditorWebPart>

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:
http://jsbin.com/roranijaba/1/edit?html,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']">
  <ul>
    <ling-repeat="friend in friends">
{{friend}}.
    </li>
  </ul>
</div>


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'}]">
  <ul>
    <ling-repeat="friend in friends">
      {{friend.name}} who is {{friend.age}} ye…