2

I implemented a toggle in my home page through javascript in content editor web part, the toggle has state between 1 and 0. Now I need the exact same toggle in all other pages of my site, but I'm not sure how to share the data about the current state of toggle among all the pages.

For instance, if I change the toggle from "0" to "1" in page A, I would like to see the state of toggle to be "1" in page B, page C, page D ...

How do I share one javascript Boolean variable among all pages in my sharepoint site?

here's the code in my content editor web part:

<button id="toggle" type="button" class= "button" value="True"><span>True</span></button>

    <button id="toggle" type="button" class= "button" value="True"><span>True</span></button>
    <script language="javascript" type="text/javascript" src="../SiteAssets/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    $i = 1;
    $(function () {
      $(".button").click(function () {
           if ($i === 0) {
              $(this).text("true");
              $i = 1;
         } 
         else 
        {
            $(this).text("false");
            $i = 0;

         }
       });
    })
    </script>
  • You could set it in a cookie or use local storage – Eric Alexander May 20 '15 at 19:47
  • @EricAlexander I tried cookie, but I would like the toggle state to be permanent and same among all users. I'm not sure how to use local storage. – SSilicon May 20 '15 at 19:50
  • You might want to save this setting someplace server side. Maybe in a settings list through Javascript using CSOM. – Arsalan Shahid May 20 '15 at 19:57
  • @SSilicon, Arsalan is right, you will need to save this setting server side if you want it to be permanent and the same among all users. JavaScript code runs in the browser, so even if you could save the state of the variable from page to page, you will not be able to have that value pass between different users browsers. (Unless you store it on the server where everyone can access it.) – Dylan Cristy May 20 '15 at 20:43
2

If all these pages are on the same site you could look at using the sites property bag.

Read in Property Bag values

var ctx = new SP.ClientContext.get_current();
var site = ctx.get_site();
var web = site.get_rootWeb();
var webProp =  web.get_allProperties();
ctx.load(web);
ctx.load(this.props);
ctx.executeQueryAsync();

To set the property

webProp.set_item("<PropertyName>", true);
web.update();
ctx.executeQueryAsync();

If you are setting this one time - you can actually use SharePoint Designer to create and set the property and then just read in the value in your webpart. If you need to persist across sites - then you need to look at server side assistance for things like:

Storing value in web.config

Storing values in farm level property bag.

Enabling the ASP.NET Session State which uses SQL to persist values.

3

You can access the Site's Property Bag using the JavaScript Client Object Model.

Here's a walkthrough:
http://www.jeremythake.com/2013/10/using-the-sharepoint-csom-api-to-get-a-property-bag-value/

2

A few options:

  1. Write the value to a list on the site (it may only have a couple of columns and a single row if it's just storing one value) and read that.
  2. Create a single frame in the window and use JavaScript to navigate through the pages. You can either read from this frame's JavaScript or by tacking a query string onto the links on the page and reading it from the URL on the target.

You may be better off with server side code (ASP or .NET) if it's going to be everywhere and you don't want to have to code everywhere.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.