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
Description
Button with link destination
2 people have
this question
+1
Reply
  • 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.
    https://codeontime.com/blog/2017/03/t...
    2. The $app.execute syntax is different to the ones on the client API docs.
    https://codeontime.com/blog/2017/09/e...
    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">

    https://pastebin.com/P9z05mG5



    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Supplier Data Island</title>
    <meta name="description" content="This is the about info">
    </head>
    <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>
    </h1>
    <p data-editable="true">
    <span data-control="field" data-field="ContactTitle"></span>
    </p>
    <p>
    <a class="btn btn-primary btn-lg" href="#" data-editable="true">Learn more &raquo;</a>
    </p>
    </div>
    </div>
    <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>
    </h2>
    <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>
    </div>
    </div>
    <hr />
    </div>
    <!-- /container -->
    </div>
    <!-- data island request -->
    <script data-type="$app.execute">
    ({
    "controller": "Customers",
    "pageIndex": 0,
    "pageSize": 1,
    "filter": [{ "field": "CustomerID", "operator": "=", "value": "DRACD"}],
    "sortExpression": null,
    "id": "CustomerSrc",
    })
    </script>
    <!-- data island request -->
    <script data-type="$app.execute">
    ({
    "controller": "Suppliers",
    "pageIndex": 0,
    "pageSize": 3,
    "sortExpression": "CompanyName",
    "id": "SupplierSrc"
    })
    </script>

    </body>
    </html>

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

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