Histórico da Página

define([
    'index',
	...
], function (index) {

    'use strict';

	var customersListController = function ($rootScope, appViewService, customerService, customizationFactory) {

		// *********************************************************************************
		// *** Variables
		// *********************************************************************************
		var self = this;

        self.records = [];
		self.recordsCount = 0;
		...
 
		// *********************************************************************************
		// *** Control Initialize
		// *********************************************************************************

		self.init = function () {

			appViewService.startView($rootScope.i18n('l-customer') + ' (Customizado)', 'demo.customer.list.controller', self);

			self.loadRecords(false);

			// Dispara o método 'initEvent' do serviço de customização    do 'thf.demo.customer' passando o controller como parâmetro
            customizationService.callEvent('thf.demo.customer', 'initEvent', self);
		};
	
		...
	};

    customersListController.$inject = [
        '$rootScope',
        '$scopetotvs.app-main-view.Service',
		'customization.customer.factory',
		// Serviço de      '$state',customização 
        '$modalcustomization.generic.Factory',
    ];

    'dateFilter',
        'totvs.app-main-view.Service',
		'customization.customer.factory', // factory com acesso ao servidor rest
        'customization.generic.Factory'
    ];

    index.register.controller('demo.customer.list.controller', customersListController);
});

index.register.controller('demo.customer.list.controller', customersListController);
});

                var title,
                    html,
                    compiledHTML;

                title = element.find(".page-head");

                // utilizando a API do jQuery podemos adicionar HTML estático a um elemento
                title.append('<div style="background-color: red; font-style: italic; font-size: 24px; color: yellow;">' +
                                'Esta tela é <a href="http://tdn.totvs.com/pages/viewpage.action?pageId=185738044" target="_blank">customizável</a>' +
                            '</div>');

                // ou podemos adicionar HTML dinâmico com bindings do angular, utilizando o scope da pagina
                // com acesso ao controller, inclusive aos atributos que foram incluídos por customização.
                // também é possível associar eventos que chamam o controller
                html = '<div style="background-color: black; font-size: 24px; color: green;">' +
                            'E posso compilar com os bindings do angular, a lista tem {{controller.recordsCount}} itens' +
                            '<div style="background-color : brown; color: white;">{{controller.customInitValue}}</div></div>';


                // o método compileHTML do customService permite que o HTML seja compilado contra o scope da tela
                compiledHTML = customService.compileHTML(params, html);


                // e este HTML compilado pode ser adicionado ao elemento utilizando a API do jQuery
                title.append(compiledHTML);
            },

            // método do evento customizado na pagina na tag HTML com totvs-custom-element="customListItem"
            // como aquele elemento é controlado por um ng-repeat,
            // esta customização é chamada para cada item que é renderizado na lista
            customListItem : function (params, element) {
                // primeiro encontramos o elemento que queremos customizar
                var title,
                    item,
                    html,
                    compiledHTML,
                    compiledField;
                
                title = element.find('div[title]:first');

                // definimos a customização que será adicionada ao elemento.
                html = '<span style="background-color: yellow">' +
                        ' - <a target="_blank" href="http://tdn.totvs.com/display/tec/TOTVS+%7C++HTML+Framework">' +
                            'Este link para TDN tamb&eacute;m e uma customiza&ccedil;&atilde;o</a>' +
                        '</span>';


                // como o HTML tem binding para o scopo do angular, precisamos compilar o HTML
                compiledHTML = customService.compileHTML(params, html);


                // e este HTML compilado pode ser adicionado ao elemento utilizando a API do jQuery
                title.append(compiledHTML);
                item = element.find('.item-info .row');


                // definimos a customização que será adicionada ao elemento, nesse caso incluímos 2 novos campos para exibição
                html = '<totvs-list-item-info title="Campo customizado #1" value="Valor customizado #1"></totvs-list-item-info>' +
                        '<totvs-list-item-info title="Campo customizado #2" value="Valor customizado #2"></totvs-list-item-info>';


                compiledField = customService.compileHTML(params, html);

                item.append(compiledField);
            }
        };

        angular.extend(service, customService);

        return service;
    }

    customerCustomService.$inject = ['customization.generic.Factory'];

    custom.register(customerCustomService);
});