Rendering Content With Elements

Decorating the Render Context with Datasources

By default, xpr.request.section, and xpr.request.article come through with enough useful values that you could construct a reasonable page render. But we can do much more than that!    

Datasources  function as adapters to pull in data into your render context. They have access to the same context variables as your element, and can also use {{ - }} variable replacement. There are five main adapter types.

Adapter Description
XprNullAdapter No data
XprSimpleJson Adapter Static JSON object
XprApiAdapter Pull data from the Expression REST API
XprWebAdapter Pull data from external APIs
XprPostHandler Render form fields and handle POSTs

You might be wondering why you'd need an XprNullAdapter - after all, what's the point of binding a Datasource which provides no data?  

The answer is that Datasources are themselves a location where one can bind a Serverside Script. We'll look at those in a bit.   

First, let's take a look at the structure of a basic JSON Datasource:

{  
    "type"          : "XprSimpleJsonAdapter",
    "contextName"   : "HelloObject",  
    "configuration" : {
        "json" : {
                "HelloProperty" : "World",
                "HelloArray"    : [1,2,3,4],
        }
    }
}

Remember how we were able to render data from the Request Context with a variable replacement syntax like: Your username is {{{xpr.request.user.Username}}}?

You can probably guess at the effect of this View Template, with the above Datasource bound:

<h1>Hello</h1>
{{#with HelloObject}}
HelloObject.HelloProperty is {{.HelloProperty}}
HelloObject.HelloArray contains: 
{{#each HelloArray}}  
<li>{{.}}</li>  
{{/each}}

Okay. That's easy. How about fetching some data from Expression's API? Let's use an HTTP query param too, and build a simple tool to search the people directory by FirstName, with a "%" wildcard.  

Datasource:

{  
    "type"          : " XprApiAdapter",
    "contextName"   : "FoundPeople",  
    "configuration" : {
        "uri" : "/people/",
        "params" : "FirstName__like" : "{{xpr.request.urlParams.search}}%"
    }
}

View Template:

<h1>People Search</h1>
<p>You searched for a first name like: {{xpr.request.urlParams.search}}</p>  
<ul>
{{#each FoundPeople}}
<li>{{.FirstName}} {{.LastName}}</li>
{{/each}}  
</ul>

We'll find our way around to WebAdapters and PostHandlers later on. First, let's take a quick look at Expressions' scripting engine.