1. Social Networks
Your Enterprise Social Network For Enterprises
Developing Zyncro Apps and customizing UI
1

2. Agenda
What is a ZyncroApp?
ZyncroApp flow, types and uses
ZyncroApp JavaScript structure
JavaScript methods
JavaScript hooks
ZyncroApp CSS structure
Samples of adding components to GUI
ZyncroApp and REST API
Zyncro development environment (Sandbox)
Basic UI customization
Advanced UI customization
2

3. What is a ZyncroApp?
A Zyncro App is a software module that is loaded and integrated into Zyncro’s
website to add new features and functionality, for example add new elements
to Zyncro’s front-end such as new sections, menus, buttons, etc.
A Zyncro App is composed of:
Front-end modules: JavaScript, CSS and HTML (jQuery is used)
Back-end modules: PHP and MySQL database (supported by default) and
the interactions with external services, may be third-party services as
Google API or internals services, the Zyncro REST API.
3

4. ZyncroApp flow
Zyncro REST API External
Load ZyncroApps services services
JavaScript/CSS modules
JS
HTML PHP
Database
CSS
AJAX calls
Client Side Server Side
Zyncro web
ZyncroApp
4

5. ZyncroApp types
The are two types of ZyncroApps:
Organization-level App: The administrator of the organization decides
whether enable/disable the app. Once enabled the App is available to all
users within the organization, who cannot deactivate it.
User-level App: The administrator of the organization enables the App, and
then each User (within the organization) decides whether activate it or not
(for example, the Chat). The app may also be activated by default.
5

6. ZyncroApp uses
We are using the ZyncroApps, for example, to provide these features:
Favorites Groups Web Content Viewer Featured Groups
Quote Chat Calendar
6

7. Play with a ZyncroApp
My first ZyncroApp!
Demo
7

8. ZyncroApp JavaScript structure
if (!$.Zyncro_Apps.Foo) {
Creates
$.Zyncro_Apps.Foo = new Object();
ZyncroApp
$.Zyncro_Apps.Foo.View = {
addToGUI : function() {
Defines //add some components to GUI...
View }
};
$.Zyncro_Apps.Foo.Controller = {
doSomething : function() {
//execute something...
Defines },
Controller start : function() {
$.Zyncro_Apps.Foo.View.addToGUI();
}
};
Starts
$.Zyncro_Apps.Foo.Controller.start();
ZyncroApp };
8

9. JavaScript methods
Some JavaScript methods are available to get information about the User
logged. With these JavaScript methods, you can:
$.Zyncro_Apps.getSessionId()
//Gets the a session ID for the logged user
$.Zyncro_Apps.getUserId()
//Gets the user ID for the logged user
$.Zyncro_Apps.getOrganizationId()
//Gets the organization ID for the logged user
$.Zyncro_Apps.getLanguage()
//Gets the current language for the logged user
$.Zyncro_Apps.addListener(listener, callback)
//Registers a call back function to be called when
a particular event occurs
$.Zyncro_Apps.callListener(listener)
//Fires a custom event
9

10. JavaScript hooks
We provided some custom events, a ZyncroApp can register to these events
Event ID Description
zyncro_zwall Success on loading the activity stream (home, profiles,
departments, groups, etc.)
zyncro_group Success loading the groups list
zyncro_documents Success loading the documents list
zyncro_contact Success loading the people list
zyncro_permission Success loading the participants list on a group or department
zyncro_zprofile Success loading the followers or following lists
10

11. JavaScript hooks
Event ID Description
zyncro_tasks Success loading a tasks list (inside a group or tasks section)
zyncro_ajax Success loading another generic AJAX events
zapp_disable Fire when a ZyncroApp is disabled
zyncro_childMessage Load a child message, this happens after publishing a
comment inside a thread
zyncro_loadThread Success loading more threads on a wall (share new thread,
show previous publications)
zyncro_loadpageapps Success when loading the ZyncroApps list on Admin Panel or
User Panel
11

12. ZyncroApp CSS structure
A ZyncroApp can be composed of a JavaScript file and a CSS file. All
the code related with styles should be included in the CSS and not in
the JavaScript.
Whenever possible, it’s advisable to use the classes defined for the
ZyncroApps. These “standard” classes will be redefined by the
Zyncro Skins, so the ZyncroApp do not need to worry about it
changes in Zyncro’s look&feel.
For example
<a class="button">Action</a>
12

13. Samples of adding components to GUI
We will see some samples of how to add components to:
A Menu Item in the Sidebar menu
An Icon in the Icons menu
A Widget to the Sidebar panel
Some Items in the Content header
Change the content of the Actual section
13

14. A Menu Item in the Sidebar menu
$("#sidebar .sidebar-menu ul").append('
<li id="menu-zapp-sample" class="zapp-sidebar-menu-item">
<a title="ZyncroApp item" href="#">
<i class="icon-flag"></i>
ZyncroApp item
</a>
</li>
');
14

15. An Icon in the Icons menu
$("#icons-menu").append('
<li id="zapp-sample-notif">
<a class="iconized popup-launcher">
<span id="count-zapp-sample-notif">5</span>
</a>
</li>
');
15

16. A Widget to the Sidebar panel
JS:
$("#sidebar-apps").append('
<div class="sidebar-widget" id="zapp-sample-widget">
<p class="widget-title">ZyncroApp title</p>
<div class="zapp-widget-content">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="zapp-box-border">
</div>
</div>
');
CSS:
16 .zapp-box-border { width:100%; float:left }

17. Some Items in the Content header
$("#main-content-header").show().html('
<p class="main-content-header-title">ZyncroApp title</p>
<a class="button">Action</a>
');
17

18. Change the content of the Actual section
18

19. Change the content of the Actual section
JS: CSS:
$("#actual-section").html(‘ #zapp-sample-form .zapp-sample.header
<div id=“zapp-sample”> {margin:2% 0px;}
<div>
<div id="zapp-sample-form"> #zapp-sample-form .zapp-sample-form-list li
<div class=“zapp-sample-header zapp-box-back-emph zapp-normal-text">Form</div> {width:100%;margin-bottom:2%;float:left;}
<ul class=“zapp-sample-form-list”>
<li> #zapp-sample-form .zapp-sample-form-list li label
<label>Field 1: </label> {padding-right:2%;text-align:right;width:30%;
<input><br> float:left;}
<span class="zapp-normal-text zapp-error-text">Mandatory field</span>
</li> #zapp-sample-form .zapp-sample-form-list li span
<li> {margin-left:32%}
<label>Field 2: </label>
<input type="checkbox"> #zapp-sample-form .zapp-sample-actions
</li> {width:100%;float:left;text-align:right;}
<li>
<label>Field 3: </label> #zapp-sample .zapp-box
<select><option>Option 1</option><option>Option 2</option></select> {float:left;width:96%;margin-top:2%;}
</li>
</ul> #zapp-sample-list ul li, #zapp-sample-list ul
<div class=“zapp-sample-actions” > {width:100%;float:left;}
<a class="zapp-normal-text zapp-link">Cancel</a>
<a class="button button-inverted">Delete form</a> #zapp-sample-list ul li span
<a class="button">Save</a> {float:left;width:30%;padding-left:1%;}
</div>
</div>
<div class="zapp-box zapp-box-back zapp-box-border">Box sample</div>
<div class="zapp-box zapp-box-back-alt zapp-box-border">Another box</div>
</div>
</div>
<div id=“zapp-sample-list”>
<ul>
<li class="zapp-box-header">
<span>Column 1</span> <span>Column 2</span>
</li>
<li class="zapp-box-row zapp-box-back-hover">
<span>Data 1</span> <span>Data 2</span>
</li>
</ul>
</div>
19
');

20. ZyncroApp and REST API
We’ll see a simple ZyncroApp that combines calls to the Zyncro REST
API. The ZyncroApp has these features:
Creates a widget on the Side Panel with two buttons: Get Wall and
Post a Message.
When you click the “Get Wall” button, an AJAX call is invoked to a
PHP service that use the Zyncro REST API to retrieve the Home Feed
of the current logged user.
The “Post a Message” button shows a text box where the user can
enter a message. An AJAX call is used to publish that message in the
Personal Feed of the logged user, using the REST API.
20

21. Zyncro Development Environment
To develop and test your applications and integrations, we provide you
access to a Zyncro Development Environment
A Zyncro account in our Sandbox environment with 5 users and up to
1GB storage space that you can use to develop and test your
integrations.
To develop with our REST API, you will get an API Key to access to it.
Access (through SFTP) to your own storage space on our servers to host
your app (where you can locate your files: JavaScript, CSS, HTML, PHP...),
up to 200MB.
Access to your own MySQL database (if you need it)
21

22. More info
Zyncro Developers Portal
http://developers.zyncro.com
22

23. Basic UI customization
From the Administration panel we provide some Basic UI Customizations
Change the Logo of the Organization, the Background Color of the Header
and the Text Color of the Header
23

24. Basic UI customization
Use a customized Subdomain (automatically generated inside Zyncro) for
your Organization, for example:
http://enterprise20.zyncro.com
It would result in a personalized login page with your logo and color.
24

25. Basic UI customization
When you generate a Zlink (Public link) in Zyncro, you can choose to show
(or not) the customized UI in them.
25

26. Basic UI customization
Create new Sections, Change the Order of Sections, Hide/show sections in
the Menu
26

27. Advanced UI customization
Use a completely different page for your Login/Forget password features
in Zyncro, provided by you. You can set the URL from the Administration
Panel.
27

28. Advanced UI customization
For Advanced UI customization, you can modify the CSS that Zyncro loads in
your organization, you have to options:
Complement (override) the current CSS that Zyncro is using
Discard the current CSS and redefined it all, like it would be a new Skin in
Zyncro
The texts of the Web application as well as the email templates that Zyncro
sends can be changed and customized. Currently, we do not provide API
services to perform these modification. They should be discussed with
Zyncro team.
28

29. Advanced UI customization
Zyncro Classic
29

30. Advanced UI customization
Zyncro Zen
30

31. WWW.ZYNCRO.COM
Twitter: @zyncro
blog: en.blog.zyncro.com
31