Skip to content
On this page

NgRest Attribute Plugins

An NgRest plugin is like the type of an input which means you can create selects, date pickers, file or image uploads and more. Each NgRest Config Plugin can have its configuration options. You should read the [[/guide/ngrest/model]] guide section to understand how to use the plugins.

LUYA System plugins

The plugins listed below can be configured but make sure your are familiar with the class reference of the plugin to be informed about all details.

NameClassReturnDescription
text\luya\admin\ngrest\plugins\TextstringInput type text field.
textArray\luya\admin\ngrest\plugins\TextArrayarrayMultiple input type text fields.
textarea\luya\admin\ngrest\plugins\TextareastringTextarea input type field.
password\luya\admin\ngrest\plugins\PasswordstringInput type password field.
selectArray\luya\admin\ngrest\plugins\SelectArraystringSelect dropdown with options from input configuration.
selectModel\luya\admin\ngrest\plugins\SelectModelstringSelect dropdown with options given from an Active Record Model class.
selectRelationActiveQueryluya\admin\ngrest\plugins\SelectRelationActiveQuerystringSelect via modal selection based on an ActiveQuery relation definition.
toggleStatus\luya\admin\ngrest\plugins\ToggleStatusinteger/stringCreate checkbox where you can toggle on or off.
image\luya\admin\ngrest\plugins\ImageintegerCreate an image upload and returns the imageId from storage system.
imageArray\luya\admin\ngrest\plugins\ImageArrayarrayCreates an uploader for multiple images and returns an array with the image ids from the storage system.
file\luya\admin\ngrest\plugins\FileintegerCreates a file upload and returns the fileId from the storage system.
fileArray\luya\admin\ngrest\plugins\FileArrayarrayCreates an uploader for multiple files and returns an array with the file ids from the storage system.
checkboxList\luya\admin\ngrest\plugins\CheckboxListarrayCreate multiple checkboxes and return the selected items as array.
checkboxRelation\luya\admin\ngrest\plugins\CheckboxRelationarrayCreate multiple checkbox based on another model with a via table.
CheckboxRelationActiveQuery\luya\admin\ngrest\plugins\CheckboxRelationActiveQueryarrayCreate an Checkbox relation based on a current existing relation definition inside the Model.
date\luya\admin\ngrest\plugins\DateintegerDate picker to choose date, month and year. Returns the Unix timestamp of the selection.
datetime\luya\admin\ngrest\plugins\DatetimeintegerDate picker to choose date, month, year hour and minute. Returns the Unix timestamp of the selection.
decimal\luya\admin\ngrest\plugins\DecimalfloatCreates a decimal input field. First parameter defines optional step size. Default = 0.001
number\luya\admin\ngrest\plugins\NumberintegerInput field where only numbers are allowed.
cmsPage\luya\admin\ngrest\plugins\CmsPageluya\cms\menu\ItemCms page selection and returns the menu component item.
link\luya\admin\ngrest\plugins\Linkluya\web\LinkInterfaceSelect an internal page or enter an external link, the database field must be a varchar field in order to store information and the CMS module is required.
slug\luya\admin\ngrest\plugins\SlugstringGenerates a slugified string which can be used for URL rules.
color\luya\admin\ngrest\plugins\ColorstringA color wheel to pick a color.
sortable\luya\admin\ngrest\plugins\SortableintegerSort items in CRUD list with arrow keys up/down. Commonly used in combination of luya\admin\traits\SortableTrait.
sortRelationArrayluya\admin\ngrest\plugins\SortRelationArrayarraySimilar to selectArray but with the ability to sort and to selected multiple items.
sortRelationModelluya\admin\ngrest\plugins\SortRelationModelarraySimilar to selectModel but with the ability to sort and to selected multiple items.
htmlluya\admin\ngrest\plugins\HtmlstringHTML data without encoding.
rawluya\admin\ngrest\plugins\RawstringDoes not modify the content, usefull when working with JSON API input/output.
indexluya\admin\ngrest\plugins\IndexstringSequential number index.
angularluya\admin\ngrest\plugins\AngularstringWrite a custom AngularJS template which can interact with the current item value.

Create a custom project Plugin

Sometimes you need to have project specific input behaviour. To achieve this you have to create your own custom NgRest plugin. First create a plugin class:

php
<?php

namespace myadminmodule\plugins;

use luya\admin\helpers\Angular;
use luya\admin\ngrest\base\Plugin;

class TestPlugin extends Plugin
{
    public function renderList($id, $ngModel)
    {
        $this->createListTag($ngModel);
    }
    
    public function renderUpdate($id, $ngModel)
    {
        return Angular::directive('my-directive', ['model' => $ngModel, 'data' => $this->getServiceName('data')]);
    }
    
    public function renderCreate($id, $ngModel)
    {
        return Angular::directive('my-directive', ['model' => $ngModel, 'data' => $this->getServiceName('data')]);
    }
    
    public function serviceData($event)
    {
        return [
            'data' => [
                // some data we always want to expose to the directive,
            ],
        ];
    }
}

The above class is abstracted from the luya\admin\ngrest\base\Plugin which requires the luya\admin\ngrest\base\Plugin::renderUpdate, luya\admin\ngrest\base\Plugin::renderList and luya\admin\ngrest\base\Plugin::renderCreate methods which are basically taking care of the form input or the element in the CRUD list view. As you can see the helper method luya\admin\helpers\Angular::directive is in charge to return a form input tag with a custom directive named my-directive. The directive has to be stored in a JavaScript file related to the admin UI which you can include by using Admin Module Assets, e.g.:

js
zaa.directive("myDirective", function() {
    return {
        restrict: "E",
        scope : {
            'model' : '=',
            'data' : '=',
        },
        controller: ['$scope', '$filter', function ($scope, $filter) {
            $scope.$watch(function() { return $scope.model }, function(n, o) {
                console.log(n, o);
            });
        }],
        template : function() {
            return '<div>Use data and model as they are assigned trough scope defintion: <input type="text" ng-model="model" /></div>';
        }
    }
});

If your code depends on an external library (which is loaded trough bower for example), you have to push this dependency into the zaa LUYA admin variable: angular.module("zaa").requires.push('ui.tinymce');. Afterwards the ui.tinymce (in this example) can be used in side your directive.

Now in order to use the custom TestPlugin in your NgRest config model you can define an extra field which takes care of getting (list) and setting (update/create) the value in your admin\ngrest\base\Model ActiveRecord class model.

php
class Product extends \luya\admin\ngrest\base\NgRestModel
{
    // ... 
    
    public function setField($data)
    {
        // This is triggered when the value from the AngularJS API response tries to save or update the model with $data.
    }
    
    public function getField()
    {
        // This is triggered when the ActiveRecord tries to get the values for the field. This is the basic getter/setter concept of the yii\base\BaseObject.
    }

    public function ngRestExtraAttributeTypes()
    {
        return [
            'field' => ['class' => myadminmodule\plugins\TestPlugin::className()],
        ];
    }
    
    public function ngRestScopes()
    {
        return [
            [['create', 'update', 'list'], ['field']],
        ];
    }
}

Make sure the field extra field is part of the validation rules as mentioned below:

php
public function rules()
{
    return [
        // ...
        [['field'], 'safe'],
    ];
}