Zyncro zyncro apps & ui customization feb 2013

Download Zyncro zyncro apps & ui customization feb 2013

Post on 17-Oct-2014

902 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

Presentacin de PowerPoint

1

Social Networks For Enterprises Your Enterprise Social Network

Developing Zyncro Apps and customizing UI

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

3

What is a ZyncroApp?

A Zyncro App is a software module that is loaded and integrated into Zyncros website to add new features and functionality, for example add new elements to Zyncros 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.

4

ZyncroApp flow

External services

Zyncro REST API services

Zyncro web

Database

AJAX calls

Load ZyncroApps JavaScript/CSS modules

ZyncroApp

PHP

JS

CSS

HTML

Client Side Server Side

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.

6

ZyncroApp uses

We are using the ZyncroApps, for example, to provide these features:

Favorites Groups Web Content Viewer Featured Groups

Quote Chat Calendar

7

Play with a ZyncroApp

My first ZyncroApp!

Demo

8

ZyncroApp JavaScript structure

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

Starts ZyncroApp

Defines Controller

Defines View

Creates ZyncroApp

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

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

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

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, its 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 Zyncros look&feel. For example

Action

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

14

A Menu Item in the Sidebar menu

$("#sidebar .sidebar-menu ul").append(' ZyncroApp item ');

15

An Icon in the Icons menu

$("#icons-menu").append(' 5 ');

16

A Widget to the Sidebar panel

JS: $("#sidebar-apps").append(' ZyncroApp title

  • Item 1
  • Item 2

'); CSS: .zapp-box-border { width:100%; float:left }

17

Some Items in the Content header

$("#main-content-header").show().html(' ZyncroApp title Action ');

18

Change the content of the Actual section

19

Change the content of the Actual section

JS: $("#actual-section").html(