Cards View

The cards view can be used to show related data like photo, text and a link about a single subject as cards.

<cards name="contact-cards" title="Contacts" model="" orderBy="fullName">
  <field name="fullName" />
  <field name="phone" />
  <field name="email" />
  <field name="address" />
  <field name="hasImage" />
  <div class="span4 card-image">
    <img ng-if="hasImage" ng-src="{{$image(null, 'image')}}">
    <img ng-if="!hasImage" src="img/user.png">
  <div class="span8">
      <strong>{{address.street}} {{address.area}}</strong><br>
      {{}}<span ng-if="address.state">, {{address.state}}</span><span ng-if=""> - {{}}</span><br>
      <abbr ng-if="phone" title="Phone">P:</abbr> {{phone}}<br>
      <abbr ng-if="email" title="Email">E:</abbr> {{email}}<br>

The cards view attributes are:




name of the view


fully qualified name of the domain model


a field to use to order cards


specify the widget of a card (default 33.33%)

You can use ui-action-click directive in template to execute any action on click event.

For example:

<button type="button" class="btn" ui-action-click="some.action" />


The <template> should be used to provide template to prepare the context of cards. It can use only the defined <field> values.

A template helper function $image(field, image) can be used to put an image.

<!-- if image is binary field -->
<img ng-src="{{$image(null, 'image')}}">

<!-- if image is m2o to MetaFile -->
<img ng-src="{{$image('image', 'content')}}">

<!-- show binary field image of custom in sale order card -->
<img ng-src="{{$image('customer', 'image')}}">

The field must be included in card view definition with <field> tag.

Following helpers are provided

  • $image(field, image) - show image for the given field

  • $fmt(field) - show the formatted value of the given field