Passing dynamic settings to Javascript in Plone

Posted on 2011-04-19 by Mikko Ohtamaa

Here is described a way to pass data from site or context object to a Javascripts easily. For each page, we create a <script> section which will include all the options in a Javascript filled in by Python code. The object is automatically created from a Python dict using JSON library.

We create the script tag in <head> section using a Grok viewlet registered there.

viewlet.py:

# -*- coding: utf-8 -*-
"""

    Viewlets related to application logic.

"""

# Python imports
import json

# Zope imports
from Acquisition import aq_inner
from zope.interface import Interface
from five import grok
from zope.component import getMultiAdapter

# Plone imports
from plone.app.layout.viewlets.interfaces import IHtmlHead

# The viewlets in this file are rendered on every content item type
grok.context(Interface)

# Use templates directory to search for templates.
grok.templatedir('templates')

# The generated HTML snippet going to <head>
TEMPLATE = u"""
<script type="text/javascript">
    var %(name)s = %(json)s;
</script>
"""

class JavascriptSettingsSnippet(grok.Viewlet):
    """ Include dynamic Javascript code in <head>.

    Include some code in <head> section which initializes
    Javascript variables. Later this code can be used
    by various scripts.

    Useful for settings.
    """

    grok.viewletmanager(IHtmlHead)

    def getSettings(self):
        """
        @return: Python dictionary of settings
        """

        context = aq_inner(self.context)
        portal_state = getMultiAdapter((context, self.request), name=u'plone_portal_state')

        return {
            # Pass dynamically allocated site URL to the Javascripts (virtual host monster thing)
            "staticMediaURL" : portal_state.portal_url() + "/++resource++yourcompany.app",
            # Some other example parameters
            "schoolId" : 3,
            "restService" : "http://yourserver.com:8080/rest"
        }

    def render(self):
        """
        Render the settings as inline Javascript object in HTML <head>
        """
        settings = self.getSettings()
        json_snippet = json.dumps(settings)

        # Use Python string template facility to produce the code
        html = TEMPLATE % { "name" : "youroptions", "json" : json_snippet }

        return html

$\"\"$ Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

One thought on “Passing dynamic settings to Javascript in Plone”

toutpt on 2011-04-20 at 14:45 said:

You can also just return the javascript content by using a tag script type=”text/javascript” tal:content=”view/javascript” in your template view where javascript return sth like “var mysettings=myjson;”

This is a better way because in your example you demonstrate how to create a view just for the settings where I guess a better use case is my view need dynamique javascript.

Leave a Reply Cancel reply