Help get this topic noticed by sharing it on Twitter, Facebook, or email.

Page with Template sections driven by data queries.

What would your approach be to create a Page with the Jumbotron template but drive the Rows / Columns with data from the database? I prefer to use the SPA methods as it is the most modern.

Example might be:
A table with Title, Description, Link, Icon
Page with a Jumbotron template
Row of 3 sections of
Icon, Title
Button with link destination
2 people have
this question
  • I was able to get close. However there are some issues.
    1. I was only able to find 1 blog with documentation on how to approach this. Please send me to more info or to an external way this is being handled.
    2. The $app.execute syntax is different to the ones on the client API docs.
    ie. you have to surround it with Quotes
    3. I can't get the $app.execute to respect the filter option. I suspect it is a syntax issue.
    4. I'm not sure how to insert a data-field into a non-html item. Ie. I would like to get the Suppliers->HomePage url and add it to the <a href="HomePage">

    <!doctype html>
    <meta charset="utf-8">
    <title>Supplier Data Island</title>
    <meta name="description" content="This is the about info">
    <body data-device="touch" data-authorize-roles="?">
    <div data-app-role="page" data-content-framework="bootstrap">
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron" data-control="repeater" data-source="CustomerSrc">
    <div class="container">
    <h1 data-editable="true">
    <span class="glyphicon glyphicon-globe"></span>
    <span data-control="field" data-field="CompanyName"></span>
    <p data-editable="true">
    <span data-control="field" data-field="ContactTitle"></span>
    <a class="btn btn-primary btn-lg" href="#" data-editable="true">Learn more &raquo;</a>
    <div class="container">
    <!-- Example row of columns -->
    <div class="row" data-control="repeater" data-source="SupplierSrc">
    <div class="col-sm-4">
    <h2 data-editable="true">
    <span class="glyphicon glyphicon-gift"></span>
    <span data-control="field" data-field="CompanyName"></span>
    <p data-editable="true"><span data-control="field" data-field="HomePage"></span></p>
    <p><a class="btn btn-default" href="#" role="button" data-editable="true">View details &raquo;</a></p>
    <hr />
    <!-- /container -->
    <!-- data island request -->
    <script data-type="$app.execute">
    "controller": "Customers",
    "pageIndex": 0,
    "pageSize": 1,
    "filter": [{ "field": "CustomerID", "operator": "=", "value": "DRACD"}],
    "sortExpression": null,
    "id": "CustomerSrc",
    <!-- data island request -->
    <script data-type="$app.execute">
    "controller": "Suppliers",
    "pageIndex": 0,
    "pageSize": 3,
    "sortExpression": "CompanyName",
    "id": "SupplierSrc"


  • (some HTML allowed)
    How does this make you feel?
    Add Image

    e.g. kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated indifferent, undecided, unconcerned