CORD-2184: Add Color and EmbeddedImage to exampleservice

Change-Id: I5e0f934a116cb44749b0cf3a2408e9b459d1dfd2
(cherry picked from commit 9d1b2c141004d6ebc03d87f21bf699af86834c18)
diff --git a/xos/synchronizer/steps/exampleserviceinstance_playbook.yaml b/xos/synchronizer/steps/exampleserviceinstance_playbook.yaml
index 5830815..88dfb01 100644
--- a/xos/synchronizer/steps/exampleserviceinstance_playbook.yaml
+++ b/xos/synchronizer/steps/exampleserviceinstance_playbook.yaml
@@ -25,6 +25,13 @@
   vars:
     - tenant_message: "{{ tenant_message }}"
     - service_message: "{{ service_message }}"
+    - foreground_color: "{{ foreground_color | default("#000000") }}"
+    - background_color: "{{ background_color | default("#FFFFFF") }}"
+    - images:
+        {% for image in images %}
+        - name: {{ image.name }}
+          url: {{ image.url }}
+        {% endfor %}
 
   roles:
     - install_apache
diff --git a/xos/synchronizer/steps/roles/create_index/templates/index.html.j2 b/xos/synchronizer/steps/roles/create_index/templates/index.html.j2
index 2347792..d9833a0 100644
--- a/xos/synchronizer/steps/roles/create_index/templates/index.html.j2
+++ b/xos/synchronizer/steps/roles/create_index/templates/index.html.j2
@@ -15,8 +15,25 @@
 limitations under the License.
 #}
 
+<html>
+<body style="background-color:{{ background_color }};">
+<font color="{{ foreground_color }}">
 
-ExampleService
- Service Message: "{{ service_message }}"
- Tenant Message: "{{ tenant_message }}"
+<h1>ExampleService</h1>
 
+<ul>
+<li>Service Message: "{{ service_message }}"</li>
+<li>Tenant Message: "{{ tenant_message }}"</li>
+</ul>
+
+{% if images %}
+<h2>Some images</h2>
+{% for image in images %}
+<img name="{{ image.name }}" href="{{ image.url }}">
+{% endfor %}
+{% endif %}
+
+</font>
+
+</body>
+</html>
diff --git a/xos/synchronizer/steps/sync_exampleserviceinstance.py b/xos/synchronizer/steps/sync_exampleserviceinstance.py
index 3462960..373fb5e 100644
--- a/xos/synchronizer/steps/sync_exampleserviceinstance.py
+++ b/xos/synchronizer/steps/sync_exampleserviceinstance.py
@@ -60,6 +60,19 @@
         fields['tenant_message'] = o.tenant_message
         exampleservice = self.get_exampleservice(o)
         fields['service_message'] = exampleservice.service_message
+
+        if o.foreground_color:
+            fields["foreground_color"] = o.foreground_color.html_code
+
+        if o.background_color:
+            fields["background_color"] = o.background_color.html_code
+
+        images=[]
+        for image in o.embedded_images.all():
+            images.append({"name": image.name,
+                           "url": image.url})
+        fields["images"] = images
+
         return fields
 
     def delete_record(self, port):