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="com.axelor.contact.db.Contact" orderBy="fullName">
  <field name="fullName" />
  <field name="phone" />
  <field name="email" />
  <field name="address" />
  <field name="hasImage" />
  <template><![CDATA[
    <>
      <Box d="flex" flexDirection="row">
        <Box d="flex" flexDirection="column" alignItems="center" flex={1}>
          <img src={hasImage ? $image(null, 'image') : "img/user.png"}/>
          <Box textAlign="center" fontWeight="bold" p={1}>{fullName}</Box>
        </Box>
        <Box d="flex" flex={2}>
          <address>
            <strong>{address.street} {address.area}</strong><br/>
            {address.city}{address.state && <span>, {address.state}</span>}{address.zip && <span> - {address.zip}</span>}<br/>
            {address.country.name}<br/>
            {phone && <span><abbr title="Phone">P:</abbr> {phone}</span>}<br/>
            {email && <span><abbr title="Email">E:</abbr> {email}</span>}
          </address>
        </Box>
      </Box>
    </>
  ]]></template>
</cards>

The cards view attributes are:

Attribute

Description

name

name of the view

model

fully qualified name of the domain model

orderBy

a field to use to order cards

cardWidth

specify the widget of a card (default 33.33%)

onDelete

action to call when deleting a card

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

For example:

<template><![CDATA[
<button type="button" class="btn" ui-action-click="some.action" />
]]>
</template>

Template

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 src={$image(null, 'image')}>

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

<!-- show binary field image of custom in sale order card -->
<img 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