Presentation title here

Adding custom UI controls to your application

Hryhorii Hrebiniukhhrebiniuk@orocrm.com

Presentation title here

● Frontend architecture overview● Writing modular javascript with OroCRM

○ Application Modules○ Page Components

● Practical examples

Agenda

Add Custom UI Controls to Your Application

Presentation title here

RequireJS proposes AMD(Asynchronous Module Definition)

JavaScript Modularity

Add Custom UI Controls to Your Application

Presentation title here

● define - method for facilitating module definition

● require - method for handling dependency loading

RequireJS

Add Custom UI Controls to Your Application

Presentation title here

define( module_id /*optional*/, [dependencies] /*optional*/, definition function /*function for instantiating the module or object*/);

define() method

Add Custom UI Controls to Your Application

Presentation title here

require( [dependencies], callback function /*optional*/);

require() method

Add Custom UI Controls to Your Application

Presentation title here

# Resources/config/requirejs.ymlconfig: shim: # configures exports and dependencies map: # maps the module_ids paths: # path mappings for the module names under the baseUrl

'jquery': 'bundles/bundle/jquery.js'build: paths: # extends requirejs configuration for the build process

'bootstrap': 'empty:'

RequireJSBundle Configuration

Add Custom UI Controls to Your Application

Presentation title here

● RequireJS● jQuery + jQuery-UI + Bootstrap● Backbone + Chaplin

Technology Stack

Add Custom UI Controls to Your Application

Presentation title here

Chaplin Architecture

Add Custom UI Controls to Your Application

Presentation title here

Oro Application Workflow

Add Custom UI Controls to Your Application

// oroui/js/app/routes.jsdefine(function () { return [ ['*pathname', 'page#index'] ];});

Presentation title here

Page Processing Flow

Add Custom UI Controls to Your Application

Presentation title here

PageComponent

Add Custom UI Controls to Your Application

Presentation title here

is extended from BaseComponent (‘oroui/js/app/components/base/component’ module)

implements Backbone.Events and Chaplin.EventBroker

public methods initialize() and dispose()

protected methods _deferredInit() and _resolveDeferredInit()

see Page Component documentation http://goo.gl/BHxhgc

PageComponent

Add Custom UI Controls to Your Application

Presentation title here

{% set options = { metadata: metaData, // configuration options data: data // initial data} %}

<div data-page-component-module ="path/to/component/module" data-page-component-options ="{{ options|json_encode }}"></div>

Define PageComponent

Add Custom UI Controls to Your Application

Presentation title here

Global Components/Views

Add Custom UI Controls to Your Application

Presentation title here

Compositions (global components, views etc.)

beforeAction: function() { // Reuse the Header view this.reuse('header', Header, {region: 'header'}); }

see Chaplin.Composer documentation http://goo.gl/OMwq6e

Composer

Add Custom UI Controls to Your Application

Presentation title here

Performs necessary actions on start up, including the following:● defines global components/views (that exist

irrespective of the active controller)● registers handlers in the mediator (see Chaplin.

mediator doc http://goo.gl/r5pmfX)

App Module

Add Custom UI Controls to Your Application

Presentation title here

# Resources/config/requirejs.ymlconfig: appmodules: - oroui/js/app/modules/views-module - oroui/js/app/modules/messenger-module

App Module Declaration

Add Custom UI Controls to Your Application

Presentation title here

require([ 'oroui/js/app/controllers/base/controller'], function (BaseController) { BaseController.loadBeforeAction([ 'oroui/js/app/views/page/content-view' ], function (PageContentView) { BaseController.addToReuse( 'content', PageContentView, { el: 'mainContainer' } ); });});

App Module Definition

Add Custom UI Controls to Your Application

Presentation title here

https://github.com/grygir/DemoUIControlBundle

cd <project_path>/srcmkdir Acmecd Acmegit clone git@github.com:grygir/DemoUIControlBundle.gitcd DemoUIControlBundle

Demo Example

Add Custom UI Controls to Your Application

Presentation title here

$ app/console cache:clear$ app/console assets:install --symlink$ app/console assetic:dump$ app/console oro:translation:dump$ app/console oro:requirejs:dump

Useful Commands

Add Custom UI Controls to Your Application

Presentation title here

Example 1

Add Custom UI Controls to Your Application

Navigation History:● History is a list of links with the page titles and URLs.● History items are ordered by time of visit (the latest are

on the top).● Records in the history are unique (by URL).● Shows information on the number of visits and the time

of the last visit for each record.● “Clear the list” action is available for the history.

Presentation title here

Example 1, Outline

Add Custom UI Controls to Your Application

1. Create App Module and History Component.2. Create Model, Collection and Views3. Develop control logic in History Component4. Create templates for views5. Reorder collection items on visited page6. Add js translations7. Add tooltips for the history links

Presentation title here

Example 2

Add Custom UI Controls to Your Application

Task: Add WYSIWYG editor.

Requirements:● WYSIWYG editor should have a base set of functions ● Extend WYSIWYG and provide way to insert links from

PinBar and Favorites collections

Presentation title here

Example 2, Outline

Add Custom UI Controls to Your Application

1. Add a new FormType – WYSIWYG, as extend for the Textarea.

2. Define template block for WYSIWYG3. Choose third-party WYSIWYG editor library4. Bind the editor to HTML markup5. Implement extra actions for WYSIWYG

Presentation title here

Conclusions

Add Custom UI Controls to Your Application

1. Always keep in mind the life cycle of your component/view/model/collection

(think who is going to take care of them, when they are not in use anymore)

Presentation title here

Conclusions

Add Custom UI Controls to Your Application

2. Do not mix roles in your MVC application

Presentation title here

Conclusions

Add Custom UI Controls to Your Application

3. Extend your application components from

component oroui/js/app/components/base/component

view oroui/js/app/views/base/view

collection-view oroui/js/app/views/base/collection-view

model oroui/js/app/models/base/model

collection oroui/js/app/models/base/collection

Presentation title here

Conclusions

Add Custom UI Controls to Your Application

4. Read documentation Backbone + Chaplin

Presentation title here

Questions

Hryhorii Hrebiniukhhrebiniuk@orocrm.com

Adding custom UI controls to your application