Record container JS APIs

Render a single data source entry in a screen via Fliplet.RecordContainer, with hooks to modify the query and react when data is retrieved — useful for layouts like a contact card.

Here’s a HTML sample of a record container with a text component rendering a dynamic value from the loaded data source entry:

<fl-record-container cid="123">
  <view name="content">
    <fl-text cid="456">
      <p>ID: {! entry.id !}</p>
      <p>Email: {! entry.data.emailAddress !}</p>
    </fl-text>
  </view>
</fl-record-container>

The record container automatically loads the data source entry based on the dataSourceEntryId query parameter, when available. If the query parameter is not available, the record container will not load any data.

The entry loaded by the record container is available in the entry variable in the context of the components inside the record container.

You can use the component’s hooks to perform actions when the data is retrieved from the data source or before the data is retrieved. See the hooks section below for more information.

The following JS APIs are available in a screen once a Record container component is dropped into the screen.

Retrieve an instance

Since you can have many list repeater components in a screen, we provide a handy function to grab a specific instance by its name or the first one available in the page when no input parameter is given.

`Fliplet.RecordContainer.get()`

Retrieves the first or a specific record container instance.

// Get the first record container instance
Fliplet.RecordContainer.get()
  .then(function (container) {
    // Use container object to perform various actions
  });

// Get the first record container instance named 'foo'
Fliplet.RecordContainer.get('foo')
  .then(function (container) {
    // Use container object to perform various actions
  });

The container instance variable above has the following properties available:

element: DOM Element
id: the component instance id
name: the component instance name
entry: the data source entry loaded by the container
data: the component instance data
dataSourceId: the data source id used for the connection
parent: the parent context

Retrieve all instances

Use the getAll method of the namespace to get all instances at once:

Fliplet.RecordContainer.getAll().then(function (containers) {
  // Use containers
});

Hooks

`recordContainerDataRetrieved`

This hook is triggered when the data is retrieved from the data source.

Attributes returned in the options object:

container: the container element
entry: the data source entry
instance: the record container instance

Fliplet.Hooks.on('recordContainerDataRetrieved', function(options) {
  // options contains "container", "entry" and "instance"
});

`recordContainerBeforeRetrieveData`

This hook is triggered before the entry is retrieved from the data source. It can be used to modify the data source query.

Attributes returned in the options object:

container: the container element
connection: the data source connection
instance: the record container instance
dataSourceId: the data source id used for the connection
dataSourceEntryId: the data source entry id to be loaded

Fliplet.Hooks.on('recordContainerBeforeRetrieveData', function () {
  // Modify the data source query used by "findOne" to retrieve the data
  return { where: { name: 'John' } };
});