Skip to content
This repository was archived by the owner on Mar 30, 2020. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,30 @@ titled "Hello." Click on this to open the app in the Symphony grid. Explore the

## A note on entity renderers

The Hello World app subscribes to the ‘entity’ Service of the Extension API, which allows the application to render Structured Objects. To use the service to render your own Structured Objects, you’ll need to send either a JCurl or Postman POST messagev4 to a room in the pod where you’ll be running the application. Here is an example of a REST payload that can be used to send a custom entity that will be rendered by the app:
The Hello World app subscribes to the ‘entity’ Service of the Extension API, which allows the application to render Structured Objects. To use the service to render your own Structured Objects, you’ll need to send either a JCurl or Postman POST messagev4 to a room in the pod where you’ll be running the application. Here is an example of a REST payload that can be used to send a custom entity that will be rendered by the app (Note: payload 'Content-Type' must be of type 'form-data'):

message:
```
<messageML>
<div class="entity" data-entity-id="timer">
<b>[Object Presentation: <i>Please install the Hello World application to render this entity.</i>]</b>
</div>
</messageML>

```
data:
```
{
    message: "<messageML><div class="entity" data-entity-id="timer"><b><i>Please install the Hello World application to
render this entity.</i></b></div></messageML>"
    data: {
        "timer": {
            "type": "com.symphony.timer",
"version": "1.0"
}
}
}
"timer": {
"type": "com.symphony.timer",
"version": "1.0",
"countdownString": "July 27, 2067"
}
}
```

When the message is sent, the default rendering will be “Please install the Hello World application to render this entity.” However, the following function tells the message controller render method to look for messages containing a Structured Object of the type ‘com.symphony.timer’:
Version "1.0" executes the static renderer, while version "2.0" executes the dynamic renderer. When the message is sent, the default rendering will be “Please install the Hello World application to render this entity.” However, the following function tells the message controller render method to look for messages containing a Structured Object of the type ‘com.symphony.timer’:

`entityService.registerRenderer( "com.symphony.timer",{}, "message:controller");`

When the app is running, that default rendering will be superseded by the custom template in controller.js. For more information about the message format for Structured Objects, see https://rest-api.symphony.com/docs/objects#sending-structured-objects-in-messages.


99 changes: 45 additions & 54 deletions src/javascript/controller.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
/**
* Licensed to the Symphony Software Foundation (SSF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The SSF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
**/
* Licensed to the Symphony Software Foundation (SSF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The SSF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
**/

// Create our own local controller service.
// We have namespaced local services with "hello:"
Expand Down Expand Up @@ -141,8 +141,8 @@ SYMPHONY.remote.hello().then(function(data) {
messageControllerService.implement({

// Calculate how much time has passed since the entity's initial render
calculateDifference: function(initial, current) {
var ms = current-initial;
calculateDifference: function(countdown, current) {
var ms = countdown-current;
var hrs = Math.floor(ms/1000/60/60);
ms -= hrs * 1000 * 60 * 60;
var min = Math.floor(ms/1000/60);
Expand All @@ -153,13 +153,17 @@ SYMPHONY.remote.hello().then(function(data) {
days-=yrs*365;
hrs-=((yrs*365*24)+(days*24));
var diff = {
sec : sec,
min : min,
hrs : hrs,
days : days,
yrs : yrs
};
return diff;
sec : this.pad(sec),
min : this.pad(min),
hrs : this.pad(hrs),
days : this.pad(days),
yrs : this.pad(yrs)
};
return diff;
},

pad: function(n) {
return (n<10) ? ("0" + n) : n;
},

// Track each entity indexed by its instance id
Expand All @@ -169,15 +173,14 @@ SYMPHONY.remote.hello().then(function(data) {

// Rerender a tracked entity every 'tick'
tick: function(instanceId) {
entity = this.tracked[instanceId];
this.rerender(entity);
entity = this.tracked[instanceId];
this.rerender(entity);
},

// Use the entity data to update the rendering of the message through the entity service
rerender: function(tracked) {
var entityData = tracked.entityData;
var timeData = this.getTimeData(entityData);

return entityService.update(timeData.entityInstanceId, timeData.template, timeData.data);
},

Expand All @@ -188,14 +191,11 @@ SYMPHONY.remote.hello().then(function(data) {
// Consider how to translate uuids as list indexing for more robust id marking
var instanceId = Math.floor(Math.random()*1000000);
entityData.instanceId = instanceId;
var renderTime = new Date();
entityData.renderTime = renderTime;

// Static rendering
if(version == "1.0") {
return this.getTimeData(entityData);

// Dynamic rendering
// Dynamic rendering
} else if (version == "2.0") {
// Track each entity
setTimeout(function () {
Expand All @@ -213,27 +213,17 @@ SYMPHONY.remote.hello().then(function(data) {

// Render the template using the current timestamp and the specified date from entity data
getTimeData: function(entityData) {
var renderTime = entityData.renderTime;
var current = new Date();
var diff = this.calculateDifference(renderTime, current);
var template;
if( entityData.version === "1.0" ) {
template = `<messageML>
<card>
<div>The time at the initial rendering was <b><text id="timeAtRender"/></b></div>
</card>
</messageML>`
} else if( entityData.version === "2.0" ) {
template = `<messageML>
<card>
<div>The time from the initial rendering at <b><text id="timeAtRender"/></b> is
<span class='tempo-bg-color--theme-primary'><text id="years"/></span> years,
<span class='tempo-bg-color--theme-primary'><text id="hrs"/></span> days,
<span class='tempo-bg-color--theme-primary'><text id="min"/></span> minutes, and
<span class='tempo-bg-color--theme-accent'><text id="sec"/></span> seconds</div>
</card>
var diff = this.calculateDifference(new Date(2067, 6, 27), current);
var template = `<messageML>
<div>The time until <b><text id="countdownString"/></b> is
<b><span class='tempo-bg-color--theme-primary'><text id="years"/></span></b> years,
<b><span class='tempo-bg-color--theme-primary'><text id="days"/></span></b> days,
<b><span class='tempo-bg-color--theme-primary'><text id="hrs"/></span></b> hours,
<b><span class='tempo-bg-color--theme-primary'><text id="min"/></span></b> minutes, and
<b><span class='tempo-bg-color--theme-accent'><text id="sec"/></span></b> seconds
</div>
</messageML>`
}
return {
// Use a custom template to utilise data sent with the message in entityData in our messageML message
template: template,
Expand All @@ -243,8 +233,9 @@ SYMPHONY.remote.hello().then(function(data) {
hrs: "" + diff.hrs,
min: "" + diff.min,
sec: "" + diff.sec,
timeAtRender: renderTime.toLocaleTimeString() + " on " + renderTime.toLocaleDateString()
}
countdownString: entityData.countdownString
},
entityInstanceId: entityData.instanceId
}
}
});
Expand Down