timeline plugin

Timeline plugin

The Timeline built-in functional module prints enriched and interactive notification collected from an ODE platform. Unlike Web Timeline, notification is completed with a rich teaser from the targeted ressource. The full ressource can be read on the spot (so from Timeline module) to ease user progression.

Note : Mobile Framework Timeline only prints the latest notification about a resource. From the user's eye, these news can move to top when the resource is updated, unlike Web Timeline, that stacks a news notification on each update.

Timeline plugins extend the set of notification's type handled in the Timeline functional module. A timeline plugin can also describe how to route to it from a push-notification, as an functional module does.

A timeline plugin works at two levels : it tells how data is displayed on the timeline view and on the details view.

Timeline plugin must be implement within the timeline functional module. It is made by declare a new data type that will generate a url or a html content to show to the user.

Note : The application backend code must be send a preview property in the notification data of your timeline notification. Otherwise, all notifications generated without this property won't be sent to Mobile Framework.

Create a new Timeline plugin

Caution : Timeline plugins aren't currently designed in a modular way. This will be rewritten in the future. for now, you need to dig down in Timeline functional module to implement your Timeline plugin.

1. Make your notification be received by Mobile Framework

First, you have to include the application name in the request sent to the server, in app/timeline/actions/storedFilters.ts, in the timelineApps array. Adds the name that corresponds to the type property of your (web) timeline notifications. This array will be converted to query params.

2. Write a dataType function to handle your notification data

In app/timeline/actions/dataTypes.ts, you have to add a new clause in the switch statement to handle your notification data. Use the uppercase name of the application (as it is received in the type property of your notification) as the case name.

Your data type case must return an object which contains :

• date: the timestamp of the notification (received as <notification data>.date.$date)

• eventType: received as <notification data>["event-type"]

• id: received as <notification data>._id

• images: a image set to used displayed.

      images: signImagesUrls(
        <notification data>.preview.images.map(url => ({
          alt: "",
          src: (url as string).startsWith("/")
            // imported Conf from "/app/Conf.ts"
            ? Conf.currentPlatform.url + url
            : url
        }))
      )

• message: The text preview of this notification. received as <notification data>.preview.text

• senderId: userId of the sender. Received as <notification data>.sender

• senderName: display name of the sender. Received as <notification data>.params.username

• url: The distant url of the resource. This will be used as an identifier to remove doubles.

You may also add an htmlContent to set the details view, instead of rely on the url to fetch it after.

You are free to add any other properties you could use to display your notification and the resource content.

3. Change the display of your notification

Set I18n keys for your event type : timeline-eventType-<application eventType> and timeline-postType-<application type>.

By default, the Timeline will show the message and the images you set in the dataType function. On the details page, it will show the htmlContent, or if not present, try to load it from the url.

You can alter things in /app/timeline/containers/NewsContent.tsx to provide more features to your detailed view (some work has already be done for Schoolbook messages).