Controllers und View erweitern

Ab der Version 1.5.1 können die AngularJS-Controller und -Views erweitert werden.

Syntax

Rufen Sie in der custom/app.php über den UI-Manager die Funktion extendRoute() auf und geben die entsprechenden Parameter an.

/custom/app.php

$app['uiManager']->extendRoute(ROUTE_NAME, 
                               CUSTOM_CONTROLLER_NAME, 
                               CUSTOM_TEMPLATE, 
                               OPTIONS
                              );

Parameter

Parameter	Typ	Optional	Beschreibung
ROUTE_NAME	String	Pflicht	Zu überschreibende Route. Siehe Erweiterbare Routen Folgemde Routen können erweitert werden.
CUSTOM_CONTROLLER_NAME	String	optional	Name des eigenen Controllers. Wird ein benutzerdefinierter Controller verwendet, muss dieser über den UI-Manager-Methode addJSFile eingebunden werden.
CUSTOM_TEMPLATE	String	optional	Name, bzw. Pfad zu einem benutzerdefiniertem Template, relativ zum Ordner /custom/Frontend/ui/default/views
OPTIONS	Array	optional	Für die Routen list und list-pim kann die Erweiterung auf eine bestimmte Entität begrenzt werden, z.B: array('entity' => 'Customer')

Erweiterbare Routen

ROUTE_NAME	Route
default	/
error	/error
login	/login
logout	/logout
list	/list/:entity
list-pim	/list/PIM/:entity
settings	/settings
files	/files

Kontroller erweitern

Vorlage

Der Controller muss dabei vom ursprünglichen Contentfly-Controller über angular.extend abgeleitet werden. Im eigenen Controller kann auf die Methoden des übergeordneten Controllers zugegriffen und mit eigenen Methoden erweitert werden. Die jeweiligen Parameter-Listen müssen mit dem zu erweiternden Controller übereinstimmen.

(function() {
  'use strict';

  angular
    .module('app')
    .controller('CustomCtrl', CustomCtrl);

  function CustomCtrl($controller, [Konstruktor-Parameter),...]){
    var vm = this;

    angular.extend(this, $controller([Contentfly Kontroller], {[Erweiterungs-Parameter,...], $extend: this }));

    //Functions
    vm.customMethod = customMethod;


    ///////////////////////////////////

    function customMethod(){
        //Benutzerdefinierte Methoden
        ...
    }

  }

})();

Contentfly Kontroller

Setzen Sie in der Methode angular.extend den zu erweiternden Contentfly-Controller, z.B. ListCtrl ein.

Konstruktor-Parameter

Im Konstruktur müssen die Parameter des zu erweiternden Controllers ohne den Parameter $extend als kommagetrennte Liste angegeben werden.

Beispiel ListCtrl

function ListCtrl($scope, $rootScope, $cookies, localStorageService, $stateParams, $state, $http, $uibModal, pimEntity, $window, EntityService, $document, $location, FileSaver, Blob, $extend){

CustomCtrl

function CustomCtrl($controller, $scope, $rootScope, $cookies, localStorageService, $stateParams, $state, $http, $uibModal, pimEntity, $window, EntityService, $document, $location, FileSaver, Blob, $extend){

Erweiterungs-Parameter

In der Methode angularExtend müssen die gleichen Parameter wie im Konstruktor als Key-Value-Liste übergeben werden.

CustomCtrl

angular.extend(this, $controller('ListCtrl', {$scope: $scope, $rootScope: $rootScope, $cookies: $cookies, localStorageService:  localStorageService, $stateParams: $stateParams, $http: $http, $uibModal: $uibModal, pimEntity: pimEntity, $window: $window, EntityService: EntityService, $document: $document, $location: $location, FileSaver: FileSaver, Blob: Blob, $extend: this }));

Templates überschreiben

Im Gegensatz zu den Controllern können Templates nicht über Vererbung erweiter werden. Wird ein benutzerdefiniertes Template verwenden, überschreibt es das ursprüngliche Template. In den relevanten Contently-Templates sind relevante Codeteile (Header, Content, ...) in eigene Untertemplates ausgelagert. Diese können per ng-include wiederverwendet werden.

Als Beispiel sehen Sie das Contentfly-Template für die Listenansicht. Im einfachsten Fall kopieren Sie den Code 1:1 in Ihr Template und passen die relevanten Stellen entsprechend an.

appcms/PIM-UI/default/assets/views/list.html

<pim-plugin key="LIST_HEADER_PREPEND" uiblocks="uiblocks"></pim-plugin>
<div class="row header" data-block="header">
    <div class="col-xl-10 col-xl-offset-1 col-lg-12 col-lg-offset-0">
        <ng-include src="'/ui/default/views/list/header.html'"></ng-include>
    </div>
</div>

<pim-plugin key="LIST_CONTENT_PREPEND" uiblocks="uiblocks"></pim-plugin>
<div class="row">
    <div class="col-xl-10 col-xl-offset-1 col-lg-12 col-lg-offset-0">
        <ng-include src="'/ui/default/views/list/list.html'"></ng-include>
    </div>
</div>
<pim-plugin key="LIST_CONTENT_APPEND" uiblocks="uiblocks"></pim-plugin>

Beispiel

Im folgenden Beispiel wird die Route /list/Customer mit einem eigenen Controller und Template erweitert.

/custom/app.php

$app['uiManager']->extendRoute('list, 'CustomListCtrl, 'controllers/custom-list.html', array('entity' => 'Customer'));
$app['uiManager']->addJSFile('controllers/custom-list.controller.js');

/custom/Frontend/ui/default/scripts/controllers/custom-list-controller.js

(function() {
  'use strict';

  angular
    .module('app')
    .controller('CustomListCtrl', CustomListCtrl);

  function CustomListCtrl($controller, $scope, $rootScope, $cookies, localStorageService, $stateParams, $http, $uibModal, pimEntity, $window, EntityService, $document, $location, FileSaver, Blob){
    var vm = this;

    angular.extend(this, $controller('ListCtrl', {$scope: $scope, $rootScope: $rootScope, $cookies: $cookies, localStorageService:  localStorageService, $stateParams: $stateParams, $http: $http, $uibModal: $uibModal, pimEntity: pimEntity, $window: $window, EntityService: EntityService, $document: $document, $location: $location, FileSaver: FileSaver, Blob: Blob, $extend: this }));

    //Functions
    vm.customMethod = customMethod;


    ///////////////////////////////////

    function customMethod(){
        //Benutzerdefinierte Methoden
        ...
    }

  }

})();

Im benutzerdefinierten Template kann der Header und die eigentliche Liste über ng-include eingebunden werden. Im Beispiel wird ein eigener Header verwendet und die ursprüngliche Listenansicht 1:1 eingebunden.

/custom/Frontend/ui/default/views/controllers/custom-list.html

<pim-plugin key="LIST_HEADER_PREPEND" uiblocks="uiblocks"></pim-plugin>
<div class="row header" data-block="header">
    <div class="col-xl-10 col-xl-offset-1 col-lg-12 col-lg-offset-0">
        <h1>Willkommen</h1>
        <button type="button" ng-click="vm.customMethod()">Öffne meine Methode</button>
    </div>
</div>

<pim-plugin key="LIST_CONTENT_PREPEND" uiblocks="uiblocks"></pim-plugin>
<div class="row">
    <div class="col-xl-10 col-xl-offset-1 col-lg-12 col-lg-offset-0">
        <ng-include src="'/ui/default/views/list/list.html'"></ng-include>
    </div>
</div>
<pim-plugin key="LIST_CONTENT_APPEND" uiblocks="uiblocks"></pim-plugin>