Widget Actions

معرفی

ویژگی اکشن‌ها را می‌توان به‌عنوان پیمایش در بین حالت‌های داشبورد یا بین داشبوردهای مختلف در نظر گرفت. اکشن‌ها امکان پیکربندی سریع و آسان انتقال به حالت ایجاد شده، انتقال به داشبوردهای دیگر، یا حتی به‌روزرسانی داشبوردی که در آن هستید را می‌دهند. بسته به ویجت، منابع اکشن متفاوت است. با این حال، نوع عملکردی که می توانید انتخاب کنید برای همه ویجت ها یکسان خواهد بود. اکشن ها در حالت ویرایش ویجت مورد نیاز تنظیم می شوند. برای درک کامل نحوه استفاده از Actions، باید یک State را به ویجت خود اضافه کنید. نحوه انجام این کار را در بخش دید کلی داشبورد قسمت حالت ها مشاهده کنید.

انواع اکشن ها

انواع اکشن ها مشخص می کند که دقیقا کدام اکشن انجام خواهد شد. شش نوع اکشن وجود دارد که برای همه ویجت ها یکسان است. نحوه پیکربندی انواع اکشن ها را با مثال موجود در نمونه های ویجت Entity Cards بیاموزید.

پیکربندی انواع اکشن

از آنجایی که انواع اکشن ها برای همه ویجت ها یکسان است، در این آموزش از منبع عملکرد Action Cell Button برای توضیح همه انواع اکشن ها استفاده می شود و با استفاده از مثال های ویجت Entity Cards توضیح داده می شود.

به حالت داشبورد جدید بروید

حالت‌ها به اصطلاح سطوحی هستند که به شما امکان می‌دهند بین دستگاه‌ها، دارایی‌ها و اشیاء ویجت مختلف حرکت کنید تا اطلاعات مورد نیاز خود را با جزئیات بیشتری ببینید. هنگام انتخاب نوع عملکرد وضعیت داشبورد جدید، به حالت انتخابی قبلی منتقل خواهید شد. نحوه اضافه کردن حالت ها به داشبورد خود را قبلا مشاهده کرده اید. پس از اضافه شدن یک وضعیت، می‌توانیم نوع اکشن وضعیت داشبورد جدید را پیکربندی کنیم:

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
به عنوان مثالی برای این راهنما، در منوی کشویی بالا، یک منبع اکشن «دکمه هدر ویجت» را انتخاب کنید.
در خط بعدی یک نام برای اکشن وارد کنید و نمادی را انتخاب کنید که نشان دهنده یک دکمه باشد. با این دکمه اکشن انجام خواهد شد.
در منوی کشویی «نوع»، یک نوع اکشن وضعیت داشبورد جدید را انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
هنگامی که حالت مورد نظر انتخاب شد، روی دکمه “افزودن” در پایین پنجره “افزودن اقدام” کلیک کنید.
اکنون اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع کنش، نماد و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

پس از ذخیره تغییرات، می توانید یک دکمه آیکون را در قسمت سمت راست بالای ویجت مشاهده کنید. با کلیک بر روی این آیکون به حالت انتخاب شده قبلی هدایت می شوید.

اگر می خواهید وضعیت انتخاب شده را در یک پنجره جداگانه باز کنید، کادر “باز کردن در گفتگوی جداگانه” را علامت بزنید.

می توانید نوار ابزار داشبورد را در پنجره محاوره ای پنهان کنید. برای انجام این کار، کادر “مخفی کردن نوار ابزار داشبورد در گفتگو” را انتخاب کنید.

وضعیت فعلی داشبورد را به‌روزرسانی کنید

این نوع اکشن امکان به روز رسانی داشبوردی که در حال حاضر در آن هستید را می دهد. هنگام استفاده از داشبورد، می‌توانید اطلاعات دقیق درباره یک دستگاه/دارایی خاص را در زمان واقعی مشاهده کنید. رایج ترین استفاده از این نوع اکشن از طریق ویجت های نمودار است که می توانید جزئیات را با دقت بیشتری ببینید. برای شروع، بیایید یک ویجت نمودار را به داشبورد اضافه کنیم تا نوع اکشن وضعیت فعلی داشبورد را به‌روزرسانی کنیم:

وارد حالت ویرایش داشبورد شوید و در منوی کشویی «انتخاب ابزارک» Charts: Timeseries Line Chart را انتخاب کنید.
در پنجره “افزودن ویجت” منبع داده خود را وارد کنید، برای مثال در این راهنما از داده های فشار استفاده شده است. روی «افزودن» در پایین سمت راست ویجت کلیک کنید.
می بینیم که ویجت نمودار روی داشبورد ظاهر شده است، اما هنوز هیچ داده ای برای نمایش ندارد.
با کلیک بر روی نماد مداد در سمت راست بالای ویجت وارد حالت ویرایش ویجت جدول شوید.
در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
به عنوان مثالی برای این راهنما، در منوی کشویی بالا، یک منبع اکشن «دکمه سلول اکشن» را انتخاب کنید.
در خط بعدی یک نام برای اکشن وارد کنید و نمادی را انتخاب کنید که نشان دهنده یک دکمه باشد. با این دکمه اکشن انجام خواهد شد.
در منوی کشویی «نوع»، نوع اکشن وضعیت فعلی داشبورد را به‌روزرسانی کنید.
پس از انتخاب نوع اکشن، روی «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
اکنون اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع کنش، نماد و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

پس از ذخیره تغییرات، نمادهای دکمه را در مقابل نام موجودیت ها مشاهده خواهید کرد. با کلیک بر روی هر یک از این نمادها، جزئیات موجودیت به روز می شوند و در ویجت نمودار در داشبورد فعلی نشان داده می شوند.

به داشبورد دیگر بروید

این نوع اکشن شما را به داشبوردی که قبلاً ایجاد کرده اید و انتخاب کرده اید انتقال می دهد. برای انتقال سریع به داشبورد انتخابی دیگر، باید:

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
به عنوان مثالی برای این راهنما، در منوی کشویی بالا، یک منبع اکشن «دکمه سلول اکشن» را انتخاب کنید.
در خط بعدی یک نام برای اکشن وارد کنید و نمادی را انتخاب کنید که نشان دهنده یک دکمه باشد. با این دکمه اکشن انجام خواهد شد.
در منوی کشویی «نوع»، یک نوع اکشن داشبورد دیگر را انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “داشبورد هدف” ظاهر می شود. داشبوردی که قبلاً ایجاد شده است را انتخاب کنید که می‌خواهید به آن منتقل شوید. توجه داشته باشید که امکان انتقال به وضعیت موجود در داشبورد انتخابی نیز وجود دارد.
پس از پیکربندی نوع اکشن، روی «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
اکنون اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع کنش، نماد و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

پس از ذخیره تغییرات، می‌توانید نماد-دکمه‌هایی را در مقابل نام موجودیت مشاهده کنید. کلیک کردن بر روی هر یک از این نمادها شما را به داشبورد انتخاب شده قبلی (یا حالت انتخاب شده در آن داشبورد) منتقل می کند.

اکشن سفارشی

یک کنش سفارشی اجازه می دهد تا به صورت دستی عملکردی را پیکربندی کنید که می تواند برای افزودن یک کنش فردی به ویجت شما (مثلاً حذف دستگاه ها/دارایی های فهرست شده) استفاده شود. برای پیکربندی یک اکشن سفارشی با یک تابع (با مثالی از حذف دستگاه):

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
به عنوان مثالی برای این راهنما، در منوی کشویی بالا، یک منبع اکشن «دکمه سلول اکشن» را انتخاب کنید.
در خط بعدی یک نام برای اکشن وارد کنید و نمادی را انتخاب کنید که نشان دهنده یک دکمه باشد. با این دکمه اکشن انجام خواهد شد.
در منوی کشویی «نوع»، نوع اکشن سفارشی را انتخاب کنید.
پس از انتخاب نوع اکشن سفارشی، فیلدی برای وارد کردن تابع ظاهر می شود.
تابع سفارشی خود را در آنجا وارد کنید. یک مثال در این آموزش یک اکشن حذف دستگاه است که توانایی حذف دستگاه ها را مستقیماً از جدول اضافه می کند (نمونه ای از عملکرد را می توانید در قسمت تصاویر صفحه پیدا کنید).
با کلیک بر روی دکمه “ذخیره” در پایین سمت راست پنجره “Add action” تغییرات را اعمال کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

یک اکشن را با کلیک کردن روی نماد “جعبه زباله” در مقابل نام موجودیت اجرا کنید.

مثالی از عملکرد حذف دستگاه:

let $injector = widgetContext.$scope.$injector;
let dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));
let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));

openDeleteDeviceDialog();

function openDeleteDeviceDialog() {
    let title = "Are you sure you want to delete the device " + entityName + "?";
    let content = "Be careful, after the confirmation, the device and all related data will become unrecoverable!";
    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(
        function(result) {
            if (result) {
                deleteDevice();
            }
        }
    );
}

function deleteDevice() {
    deviceService.deleteDevice(entityId.id).subscribe(
        function() {
            widgetContext.updateAliases();
        }
    );
}

اکشن سفارشی (با قالب HTML)

یک اکشن سفارشی با یک الگوی HTML اجازه می دهد تا به صورت دستی یک تابع را در قالب HTML موجود وارد کنید (به عنوان مثال ایجاد پنجره های گفتگو با فرصتی برای ایجاد یا ویرایش دستگاه ها/دارایی های فهرست شده).

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
به عنوان مثالی برای این راهنما، در منوی کشویی بالا، یک منبع اکشن «دکمه سلول اکشن» را انتخاب کنید.
در خط بعدی یک نام برای اکشن وارد کنید و نمادی را انتخاب کنید که نشان دهنده یک دکمه باشد. با این دکمه اکشن انجام خواهد شد.
در منوی کشویی «نوع»، یک اکشن سفارشی (با قالب HTML) را انتخاب کنید. پس از انتخاب نوع اکشن سفارشی، چهار تب ظاهر می شوند:
- تب منابع برای تعیین منابع خارجی جاوا اسکریپت/CSS مورد استفاده توسط ویجت استفاده می شود.
- تب CSS شامل تعاریف سبک CSS خاص اکشن سفارشی است.
- تب HTML حاوی کد HTML اکشن سفارشی است.
- بخش جاوا اسکریپت حاوی کد JS اکشن سفارشی شما است.
در تب جاوا اسکریپت، یک تابع جاوا اسکریپت را برای اکشن سفارشی خود وارد کنید (نمونه ای از تابع جاوا اسکریپت را می توانید در قسمت اسکرین شات ها پیدا کنید).
در تب HTML، یک کد HTML برای اکشن سفارشی خود وارد کنید (نمونه ای از کد HTML را می توانید در قسمت اسکرین شات ها پیدا کنید).
با کلیک بر روی دکمه “ذخیره” در پایین سمت راست پنجره “Add action” تغییرات را اعمال کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

اکشن ها را با کلیک کردن روی نمادهای مناسب انجام دهید.

نمونه هایی از تابع جاوا اسکریپت و کد HTML که امکان ایجاد یک دستگاه یا یک دارایی را اضافه می کند:

کد مربوط به جاوا اسکریپت (به بخش مربوطه برای دیدن کد مراجعه کند در سند اصلی)

let $injector = widgetContext.$scope.$injector;
let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));

openAddEntityDialog();

function openAddEntityDialog() {
customDialog.customDialog(htmlTemplate, AddEntityDialogController).subscribe();
}

function AddEntityDialogController(instance) {
let vm = instance;

    vm.allowedEntityTypes = ['ASSET', 'DEVICE'];
    vm.entitySearchDirection = {
        from: "FROM",
        to: "TO"
    }

    vm.addEntityFormGroup = vm.fb.group({
     entityName: ['', [vm.validators.required]],
     entityType: ['DEVICE'],
     entityLabel: [null],
     type: ['', [vm.validators.required]],
     attributes: vm.fb.group({
         latitude: [null],
         longitude: [null],
         address: [null],
         owner: [null],
         number: [null, [vm.validators.pattern(/^-?[0-9]+$/)]],
         booleanValue: [null]
     }),
     relations: vm.fb.array([])
    });

    vm.cancel = function() {
        vm.dialogRef.close(null);
    };

    vm.relations = function() {
        return vm.addEntityFormGroup.get('relations');
    };

    vm.addRelation = function() {
        vm.relations().push(vm.fb.group({
         relatedEntity: [null, [vm.validators.required]],
         relationType: [null, [vm.validators.required]],
         direction: [null, [vm.validators.required]]
        }));
    };

    vm.removeRelation = function(index) {
        vm.relations().removeAt(index);
        vm.relations().markAsDirty();
    };

    vm.save = function() {
        vm.addEntityFormGroup.markAsPristine();
        saveEntityObservable().subscribe(
            function (entity) {
                widgetContext.rxjs.forkJoin([
                    saveAttributes(entity.id),
                    saveRelations(entity.id)
                ]).subscribe(
                    function () {
                        widgetContext.updateAliases();
                        vm.dialogRef.close(null);
                    }
                );
            }
        );
    };

    function saveEntityObservable() {
        const formValues = vm.addEntityFormGroup.value;
        let entity = {
            name: formValues.entityName,
            type: formValues.type,
            label: formValues.entityLabel
        };
        if (formValues.entityType == 'ASSET') {
            return assetService.saveAsset(entity);
        } else if (formValues.entityType == 'DEVICE') {
            return deviceService.saveDevice(entity);
        }
    }

    function saveAttributes(entityId) {
        let attributes = vm.addEntityFormGroup.get('attributes').value;
        let attributesArray = [];
        for (let key in attributes) {
            if(attributes[key] !== null) {
                attributesArray.push({key: key, value: attributes[key]});
            }
        }
        if (attributesArray.length > 0) {
            return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
        }
        return widgetContext.rxjs.of([]);
    }

    function saveRelations(entityId) {
        let relations = vm.addEntityFormGroup.get('relations').value;
        let tasks = [];
        for(let i=0; i < relations.length; i++) {
            let relation = {
                type: relations[i].relationType,
                typeGroup: 'COMMON'
            };
            if (relations[i].direction == 'FROM') {
                relation.to = relations[i].relatedEntity;
                relation.from = entityId;
            } else {
                relation.to = entityId;
                relation.from = relations[i].relatedEntity;
            }
            tasks.push(entityRelationService.saveRelation(relation));
        }
        if (tasks.length > 0) {
            return widgetContext.rxjs.forkJoin(tasks);
        }
        return widgetContext.rxjs.of([]);
    }
}

کد مربوط به HTML (به بخش مربوطه برای دیدن کد مراجعه کند در سند اصلی)

<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"
      (ngSubmit)="save()" class="add-entity-form">
    <mat-toolbar fxLayout="row" color="primary">
        <h2>Add entity</h2>
        <span fxFlex></span>
        <button mat-icon-button (click)="cancel()" type="button">
            <mat-icon class="material-icons">close</mat-icon>
        </button>
    </mat-toolbar>
    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
    </mat-progress-bar>
    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
    <div mat-dialog-content fxLayout="column">
        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
            <mat-form-field fxFlex class="mat-block">
                <mat-label>Entity Name</mat-label>
                <input matInput formControlName="entityName" required>
                <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">
                    Entity name is required.
                </mat-error>
            </mat-form-field>
            <mat-form-field fxFlex class="mat-block">
                <mat-label>Entity Label</mat-label>
                <input matInput formControlName="entityLabel" >
            </mat-form-field>
        </div>
        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
            <tb-entity-type-select
                    class="mat-block"
                    formControlName="entityType"
                    [showLabel]="true"
                    [allowedEntityTypes]="allowedEntityTypes"
            ></tb-entity-type-select>
            <tb-entity-subtype-autocomplete
                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"
                    class="mat-block"
                    formControlName="type"
                    [required]="true"
                    [entityType]="'ASSET'"
            ></tb-entity-subtype-autocomplete>
            <tb-entity-subtype-autocomplete
                    fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"
                    class="mat-block"
                    formControlName="type"
                    [required]="true"
                    [entityType]="'DEVICE'"
            ></tb-entity-subtype-autocomplete>
        </div>
        <div formGroupName="attributes" fxLayout="column">
            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Latitude</mat-label>
                    <input type="number" step="any" matInput formControlName="latitude">
                </mat-form-field>
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Longitude</mat-label>
                    <input type="number" step="any" matInput formControlName="longitude">
                </mat-form-field>
            </div>
            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Address</mat-label>
                    <input matInput formControlName="address">
                </mat-form-field>
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Owner</mat-label>
                    <input matInput formControlName="owner">
                </mat-form-field>
            </div>
            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Integer Value</mat-label>
                    <input type="number" step="1" matInput formControlName="number">
                    <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">
                        Invalid integer value.
                    </mat-error>
                </mat-form-field>
                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
                    <label class="checkbox-label">Boolean Value</label>
                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
                        
                    </mat-checkbox>
                </div>
            </div>
        </div>
        <div class="relations-list">
            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
            <div class="body" [fxShow]="relations().length">
                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
                        <div fxFlex fxLayout="column">
                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
                                <mat-form-field class="mat-block" style="min-width: 100px;">
                                    <mat-label>Direction</mat-label>
                                    <mat-select formControlName="direction" name="direction">
                                        <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">
                                            
                                        </mat-option>
                                    </mat-select>
                                    <mat-error *ngIf="relation.get('direction').hasError('required')">
                                        Relation direction is required.
                                    </mat-error>
                                </mat-form-field>
                                <tb-relation-type-autocomplete
                                        fxFlex class="mat-block"
                                        formControlName="relationType"
                                        [required]="true">
                                </tb-relation-type-autocomplete>
                            </div>
                            <div fxLayout="row" fxLayout.xs="column">
                                <tb-entity-select
                                        fxFlex class="mat-block"
                                        [required]="true"
                                        formControlName="relatedEntity">
                                </tb-entity-select>
                            </div>
                        </div>
                        <div fxLayout="column" fxLayoutAlign="center center">
                            <button mat-icon-button color="primary"
                                    aria-label="Remove"
                                    type="button"
                                    (click)="removeRelation(i)"
                                    matTooltip="Remove relation"
                                    matTooltipPosition="above">
                                <mat-icon>close</mat-icon>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <button mat-raised-button color="primary"
                        type="button"
                        (click)="addRelation()"
                        matTooltip="Add Relation"
                        matTooltipPosition="above">
                    Add
                </button>
            </div>
        </div>
    </div>
    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
        <button mat-button color="primary"
                type="button"
                [disabled]="(isLoading$ | async)"
                (click)="cancel()" cdkFocusInitial>
            Cancel
        </button>
        <button mat-button mat-raised-button color="primary"
                type="submit"
                [disabled]="(isLoading$ | async) || addEntityForm.invalid || !addEntityForm.dirty">
            Create
        </button>
    </div>
</form>

نمونه هایی از تابع جاوا اسکریپت و کد HTML که امکان ویرایش یک دستگاه یا یک دارایی را اضافه می کند:

کد مربوط به جاوا اسکریپت (به بخش مربوطه برای دیدن کد مراجعه کند در سند اصلی)

let $injector = widgetContext.$scope.$injector;
let customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));
let entityService = $injector.get(widgetContext.servicesMap.get('entityService'));
let assetService = $injector.get(widgetContext.servicesMap.get('assetService'));
let deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
let attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));
let entityRelationService = $injector.get(widgetContext.servicesMap.get('entityRelationService'));

openEditEntityDialog();

function openEditEntityDialog() {
customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();
}

function EditEntityDialogController(instance) {
let vm = instance;

    vm.entityName = entityName;
    vm.entityType = entityId.entityType;
    vm.entitySearchDirection = {
        from: "FROM",
        to: "TO"
    };
    vm.attributes = {};
    vm.oldRelationsData = [];
    vm.relationsToDelete = [];
    vm.entity = {};

    vm.editEntityFormGroup = vm.fb.group({
        entityName: ['', [vm.validators.required]],
        entityType: [null],
        entityLabel: [null],
        type: ['', [vm.validators.required]],
        attributes: vm.fb.group({
            latitude: [null],
            longitude: [null],
            address: [null],
            owner: [null],
            number: [null, [vm.validators.pattern(/^-?[0-9]+$/)]],
            booleanValue: [false]
        }),
        oldRelations: vm.fb.array([]),
        relations: vm.fb.array([])
    });

    getEntityInfo();

    vm.cancel = function() {
        vm.dialogRef.close(null);
    };

    vm.relations = function() {
        return vm.editEntityFormGroup.get('relations');
    };

    vm.oldRelations = function() {
        return vm.editEntityFormGroup.get('oldRelations');
    };

    vm.addRelation = function() {
        vm.relations().push(vm.fb.group({
            relatedEntity: [null, [vm.validators.required]],
            relationType: [null, [vm.validators.required]],
            direction: [null, [vm.validators.required]]
        }));
    };

    function addOldRelation() {
        vm.oldRelations().push(vm.fb.group({
            relatedEntity: [{value: null, disabled: true}, [vm.validators.required]],
            relationType: [{value: null, disabled: true}, [vm.validators.required]],
            direction: [{value: null, disabled: true}, [vm.validators.required]]
        }));
    }

    vm.removeRelation = function(index) {
        vm.relations().removeAt(index);
        vm.relations().markAsDirty();
    };

    vm.removeOldRelation = function(index) {
        vm.oldRelations().removeAt(index);
        vm.relationsToDelete.push(vm.oldRelationsData[index]);
        vm.oldRelations().markAsDirty();
    };

    vm.save = function() {
        vm.editEntityFormGroup.markAsPristine();
        widgetContext.rxjs.forkJoin([
            saveAttributes(entityId),
            saveRelations(entityId),
            saveEntity()
        ]).subscribe(
            function () {
                widgetContext.updateAliases();
                vm.dialogRef.close(null);
            }
        );
    };

    function getEntityAttributes(attributes) {
        for (var i = 0; i < attributes.length; i++) {
            vm.attributes[attributes[i].key] = attributes[i].value;
        }
    }

    function getEntityRelations(relations) {
        let relationsFrom = relations[0];
        let relationsTo = relations[1];
        for (let i=0; i < relationsFrom.length; i++) {
            let relation = {
                direction: 'FROM',
                relationType: relationsFrom[i].type,
                relatedEntity: relationsFrom[i].to
            };
            vm.oldRelationsData.push(relation);
            addOldRelation();
        }
        for (let i=0; i < relationsTo.length; i++) {
            let relation = {
                direction: 'TO',
                relationType: relationsTo[i].type,
                relatedEntity: relationsTo[i].from
            };
            vm.oldRelationsData.push(relation);
            addOldRelation();
        }
    }

    function getEntityInfo() {
        widgetContext.rxjs.forkJoin([
            entityRelationService.findInfoByFrom(entityId),
            entityRelationService.findInfoByTo(entityId),
            attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE'),
            entityService.getEntity(entityId.entityType, entityId.id)
        ]).subscribe(
            function (data) {
                getEntityRelations(data.slice(0,2));
                getEntityAttributes(data[2]);
                vm.entity = data[3];
                vm.editEntityFormGroup.patchValue({
                    entityName: vm.entity.name,
                    entityType: vm.entityType,
                    entityLabel: vm.entity.label,
                    type: vm.entity.type,
                    attributes: vm.attributes,
                    oldRelations: vm.oldRelationsData
                }, {emitEvent: false});
            }
        );
    }

    function saveEntity() {
        const formValues = vm.editEntityFormGroup.value;
        if (vm.entity.label !== formValues.entityLabel){
            vm.entity.label = formValues.entityLabel;
            if (formValues.entityType == 'ASSET') {
                return assetService.saveAsset(vm.entity);
            } else if (formValues.entityType == 'DEVICE') {
                return deviceService.saveDevice(vm.entity);
            }
        }
        return widgetContext.rxjs.of([]);
    }

    function saveAttributes(entityId) {
        let attributes = vm.editEntityFormGroup.get('attributes').value;
        let attributesArray = [];
        for (let key in attributes) {
            if (attributes[key] !== vm.attributes[key]) {
                attributesArray.push({key: key, value: attributes[key]});
            }
        }
        if (attributesArray.length > 0) {
            return attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributesArray);
        }
        return widgetContext.rxjs.of([]);
    }

    function saveRelations(entityId) {
        let relations = vm.editEntityFormGroup.get('relations').value;
        let tasks = [];
        for(let i=0; i < relations.length; i++) {
            let relation = {
                type: relations[i].relationType,
                typeGroup: 'COMMON'
            };
            if (relations[i].direction == 'FROM') {
                relation.to = relations[i].relatedEntity;
                relation.from = entityId;
            } else {
                relation.to = entityId;
                relation.from = relations[i].relatedEntity;
            }
            tasks.push(entityRelationService.saveRelation(relation));
        }
        for (let i=0; i < vm.relationsToDelete.length; i++) {
            let relation = {
                type: vm.relationsToDelete[i].relationType
            };
            if (vm.relationsToDelete[i].direction == 'FROM') {
                relation.to = vm.relationsToDelete[i].relatedEntity;
                relation.from = entityId;
            } else {
                relation.to = entityId;
                relation.from = vm.relationsToDelete[i].relatedEntity;
            }
            tasks.push(entityRelationService.deleteRelation(relation.from, relation.type, relation.to));
        }
        if (tasks.length > 0) {
            return widgetContext.rxjs.forkJoin(tasks);
        }
        return widgetContext.rxjs.of([]);
    }
}

کد مربوط به HTML (به بخش مربوطه برای دیدن کد مراجعه کند در سند اصلی)

<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"
      (ngSubmit)="save()"  class="edit-entity-form">
    <mat-toolbar fxLayout="row" color="primary">
        <h2>Edit  </h2>
        <span fxFlex></span>
        <button mat-icon-button (click)="cancel()" type="button">
            <mat-icon class="material-icons">close</mat-icon>
        </button>
    </mat-toolbar>
    <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
    </mat-progress-bar>
    <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
    <div mat-dialog-content fxLayout="column">
        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
            <mat-form-field fxFlex class="mat-block">
                <mat-label>Entity Name</mat-label>
                <input matInput formControlName="entityName" required readonly="">
            </mat-form-field>
            <mat-form-field fxFlex class="mat-block">
                <mat-label>Entity Label</mat-label>
                <input matInput formControlName="entityLabel">
            </mat-form-field>
        </div>
        <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
            <mat-form-field fxFlex class="mat-block">
                <mat-label>Entity Type</mat-label>
                <input matInput formControlName="entityType" readonly>
            </mat-form-field>
            <mat-form-field fxFlex class="mat-block">
                <mat-label>Type</mat-label>
                <input matInput formControlName="type" readonly>
            </mat-form-field>
        </div>
        <div formGroupName="attributes" fxLayout="column">
            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Latitude</mat-label>
                    <input type="number" step="any" matInput formControlName="latitude">
                </mat-form-field>
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Longitude</mat-label>
                    <input type="number" step="any" matInput formControlName="longitude">
                </mat-form-field>
            </div>
            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Address</mat-label>
                    <input matInput formControlName="address">
                </mat-form-field>
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Owner</mat-label>
                    <input matInput formControlName="owner">
                </mat-form-field>
            </div>
            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
                <mat-form-field fxFlex class="mat-block">
                    <mat-label>Integer Value</mat-label>
                    <input type="number" step="1" matInput formControlName="number">
                    <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">
                        Invalid integer value.
                    </mat-error>
                </mat-form-field>
                <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>
                    <label class="checkbox-label">Boolean Value</label>
                    <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">
                        
                    </mat-checkbox>
                </div>
            </div>
        </div>
        <div class="relations-list old-relations">
            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>
            <div class="body" [fxShow]="oldRelations().length">
                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" 
                     *ngFor="let relation of oldRelations().controls; let i = index;">
                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
                        <div fxFlex fxLayout="column">
                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
                                <mat-form-field class="mat-block" style="min-width: 100px;">
                                    <mat-label>Direction</mat-label>
                                    <mat-select formControlName="direction" name="direction">
                                        <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">
                                            
                                        </mat-option>
                                    </mat-select>
                                    <mat-error *ngIf="relation.get('direction').hasError('required')">
                                        Relation direction is required.
                                    </mat-error>
                                </mat-form-field>
                                <tb-relation-type-autocomplete
                                        fxFlex class="mat-block"
                                        formControlName="relationType"
                                        required="true">
                                </tb-relation-type-autocomplete>
                            </div>
                            <div fxLayout="row" fxLayout.xs="column">
                                <tb-entity-select
                                        fxFlex class="mat-block"
                                        required="true"
                                        formControlName="relatedEntity">
                                </tb-entity-select>
                            </div>
                        </div>
                        <div fxLayout="column" fxLayoutAlign="center center">
                            <button mat-icon-button color="primary"
                                    aria-label="Remove"
                                    type="button"
                                    (click)="removeOldRelation(i)"
                                    matTooltip="Remove relation"
                                    matTooltipPosition="above">
                                <mat-icon>close</mat-icon>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="relations-list">
            <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>
            <div class="body" [fxShow]="relations().length">
                <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">
                    <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">
                        <div fxFlex fxLayout="column">
                            <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column"  fxLayoutGap.xs="0">
                                <mat-form-field class="mat-block" style="min-width: 100px;">
                                    <mat-label>Direction</mat-label>
                                    <mat-select formControlName="direction" name="direction">
                                        <mat-option *ngFor="let direction of entitySearchDirection | keyvalue" [value]="direction.value">
                                            
                                        </mat-option>
                                    </mat-select>
                                    <mat-error *ngIf="relation.get('direction').hasError('required')">
                                        Relation direction is required.
                                    </mat-error>
                                </mat-form-field>
                                <tb-relation-type-autocomplete
                                        fxFlex class="mat-block"
                                        formControlName="relationType"
                                        [required]="true">
                                </tb-relation-type-autocomplete>
                            </div>
                            <div fxLayout="row" fxLayout.xs="column">
                                <tb-entity-select
                                        fxFlex class="mat-block"
                                        [required]="true"
                                        formControlName="relatedEntity">
                                </tb-entity-select>
                            </div>
                        </div>
                        <div fxLayout="column" fxLayoutAlign="center center">
                            <button mat-icon-button color="primary"
                                    aria-label="Remove"
                                    type="button"
                                    (click)="removeRelation(i)"
                                    matTooltip="Remove relation"
                                    matTooltipPosition="above">
                                <mat-icon>close</mat-icon>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <button mat-raised-button color="primary"
                        type="button"
                        (click)="addRelation()"
                        matTooltip="Add Relation"
                        matTooltipPosition="above">
                    Add
                </button>
            </div>
        </div>
    </div>
    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
        <button mat-button color="primary"
                type="button"
                [disabled]="(isLoading$ | async)"
                (click)="cancel()" cdkFocusInitial>
            Cancel
        </button>
        <button mat-button mat-raised-button color="primary"
                type="submit"
                [disabled]="(isLoading$ | async) || editEntityForm.invalid || !editEntityForm.dirty">
            Save
        </button>
    </div>
</form>

اکشن موبایل

عملکرد موبایل در پیکربندی اپلیکیشن موبایل توضیح داده شده است. برای جزئیات بیشتر به اقدامات موبایل مراجعه کنید.

منابع اکشن

منابع اکشن‌ها عمل خاصی است که برای دستیابی به یک هدف باید انجام شود (مانند کلیک کردن روی دکمه سرصفحه ویجت، دوبار کلیک کردن روی یک ردیف یا نشانگر نقشه). منابع اکشن برای همه ویجت ها متفاوت است. منابع اکشن برای هر نوع ویجت به طور جداگانه با استفاده از نمونه‌ای از متداول‌ترین نوع اکشن «پیمایش به وضعیت داشبورد جدید» توضیح داده می‌شود.

همه منابع اکشن با نمونه‌ای از نوع عملکرد «پیمایش به وضعیت داشبورد جدید» نشان داده می‌شوند.

پیکربندی منابع اکشن

برای تناسب، منابع اکشن را در پرکاربردترین ویجت‌ها در نظر می‌گیریم. لطفاً از بخش مربوطه چگونگی افزودن ویجت Entity Table را به داشبورد خود اضافه کنید. برای افزودن یک اکشن به ویجت Entity Table:

به حالت ویرایش داشبورد بروید؛
روی نماد “مداد” در گوشه سمت راست بالای ویجت کلیک کنید.
آخرین سلول “Actions” را انتخاب کنید و روی نماد “Plus” در سمت راست پنجره کلیک کنید.

1. دکمه سلول اکشن

با کلیک بر روی نمادی که به عنوان دکمه انتخاب شده است، یک اکشن اجرا می شود. برای پیکربندی منبع اکشن دکمه Action cell، باید:

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، منبع اکشن دکمه سلول اکشن را انتخاب کنید.
در خط بعدی یک نام برای اکشن وارد کنید و نمادی را انتخاب کنید که نشان دهنده یک دکمه باشد. با این دکمه اکشن انجام خواهد شد.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
وقتی همه تنظیمات مورد نیاز پیکربندی شدند، روی «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
اکنون اکشن پیکربندی شده را مشاهده می کنید، بنابراین می توانید منبع اکشن، نماد و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

همانطور که می بینید، در مقابل نام هر موجودیت یک دکمه سلول اکشن قرار دارد. با کلیک بر روی این دکمه، اکشن انجام می شود، یعنی انتقال به حالت انتخاب شده.

2.دکمه هدر ویجت

یک دکمه در هدر ویجت ظاهر می شود. با زدن این دکمه یک اکشن اجرا می شود. این دکمه مسئول کل ویجت است، نه برای موجودیت های جداگانه. دکمه هدر ویجت پرکاربردترین منبع اکشن است و در همه ویجت ها یافت می شود. برای پیکربندی منبع اکشن دکمه هدر ویجت، باید:

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، منبع اکشن دکمه هدر ویجت را انتخاب کنید.
در خط بعدی یک نام برای اکشن وارد کنید و نمادی را انتخاب کنید که نشان دهنده یک دکمه باشد. با این دکمه اکشن انجام خواهد شد.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
وقتی همه تنظیمات مورد نیاز پیکربندی شدند، روی «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
اکنون اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع اکشن، نماد و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

همانطور که اکنون مشاهده می کنید، در سربرگ ویجت یک نماد دکمه ظاهر شده است. پس از کلیک بر روی آن، اکشن انجام می شود، یعنی انتقال به حالت انتخاب شده.

3. کلیک روی ردیف

با کلیک بر روی ردیف ویجت Table یک اکشن اجرا می شود. برای پیکربندی منبع اکشن کلیک روی ردیف، باید:

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، منبع اکشن کلیک روی ردیف را انتخاب کنید.
نام اکشن را در خط مناسب وارد کنید.
با استفاده از این منبع اکشن، هیچ دکمه ای روی ویجت وجود نخواهد داشت، بنابراین ما نباید نمادی را انتخاب کنیم.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
وقتی همه تنظیمات مورد نیاز پیکربندی شدند، روی «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
اکنون، اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع اکشن و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

برای اجرای یک اکشن، یعنی انتقال به حالت انتخابی، فقط روی هر یک از ردیف های ویجت جدول خود کلیک کنید.

4. دابل کلیک روی ردیف

دوبار کلیک کردن روی هر ردیف از ویجت جدول Entity یک اکشن را اجرا می کند. برای پیکربندی منبع اکشن دوبار کلیک روی ردیف، باید:

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، منبع اکشن دوبار کلیک روی ردیف را انتخاب کنید.
نام اکشن را در خط مناسب وارد کنید.
با استفاده از این منبع اکشن، هیچ دکمه ای روی ویجت وجود نخواهد داشت، بنابراین ما نباید نمادی را انتخاب کنیم.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
وقتی همه تنظیمات مورد نیاز پیکربندی شدند، روی «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
اکنون، اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع اکشن و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

برای اجرای یک عمل، یعنی انتقال به حالت انتخابی، فقط روی هر یک از ردیف‌های ویجت جدول خود دوبار کلیک کنید.

5. در گره انتخاب شده(فقط در ویجت Entities Hierarchy)

هنگامی که ویجت Entities Hierarchy اضافه شد، باید خود یک سلسله مراتب را پیکربندی کنید. چگونه این کار را انجام دهیم، لطفاً در بخش خود بگیرید. پس از اضافه شدن روابط، به حالت ویرایش ویجت Entities Hierarchy بروید. برای پیکربندی On node منبع اکشن انتخاب شده:

در حالت ویرایش ویجت به آخرین سلول به نام «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، یک منبع اکشن انتخاب شده در گره را انتخاب کنید.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
پس از پیکربندی تمام تنظیمات مورد نیاز، روی “افزودن” در پایین سمت راست پنجره “Add action” کلیک کنید.
اکنون اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع اکشن و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

برای انجام یک اکشن، باید روی هر یک از گره‌های موجود در سلسله مراتب Entities کلیک کنید.

6. کلیک بر روی عنصر HTML (فقط در ویجت های کارت HTML و Value Title )

ThingsBoard دو ویجت دارد که می‌توانید با شخصی‌سازی کد HTML در تنظیمات آن‌ها را به‌طور کامل پیکربندی کنید. هنگامی که یک کد نوشته می شود، می توان یک منبع اکشن را در آن وارد کرد. نحوه افزودن یک منبع اکشن به کارت‌های HTML و ویجت‌های عنوان ارزش(Value Title):

ویجت HTML Cards

در حالت ویرایش ویجت به آخرین سلول به نام «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، روی منبع اکشن کلیک بر روی HTML را انتخاب کنید.
نام اکشن را وارد کنید و حتماً آن را به خاطر بسپارید، زیرا هنگام پیکربندی کد HTML از نام اکشن استفاده خواهد شد.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
پس از پیکربندی تمام تنظیمات مورد نیاز، روی “افزودن” در پایین سمت راست پنجره “Add action” کلیک کنید.
اکنون اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع کنش و نوع عمل را دوباره بررسی کنید.
اکنون به سلول Advanced ویجت بروید. در آنجا باید دو فیلد را ببینید: CSS و HTML.
در قسمت HTML یک شناسه از اکشن که نام آن است وارد کنید. از آنجایی که نام در مثال test1 است، کد HTML به شکل زیر خواهد بود:

<div id='button' class='card'>HTML code here</div>

جایی که دکمه نام اکشن است و کد HTML در اینجا متنی است که در ویجت کارت HTML نشان داده می شود.

سپس با کلیک بر روی نماد تیک نارنجی در سمت راست بالای پنجره، تغییرات را اعمال کنید و سپس پنجره جزئیات را ببندید. در حالت ویرایش داشبورد، تغییرات اعمال شده را با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه ذخیره کنید. برای اجرای یک اکشن در هر نقطه از ویجت کلیک کنید.

ویجت عنوان ارزش(Value Title):

در حالت ویرایش ویجت، به آخرین سلول به نام «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، روی منبع اکشن کلیک بر روی HTML را انتخاب کنید.
نام اکشن را وارد کنید و حتماً آن را به خاطر بسپارید، زیرا هنگام پیکربندی کد HTML از نام اکشن استفاده خواهد شد.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
پس از پیکربندی تمام تنظیمات مورد نیاز، روی “افزودن” در پایین سمت راست پنجره “Add action” کلیک کنید.
اکنون اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع کنش و نوع عمل را دوباره بررسی کنید.
اکنون به سلول Advanced ویجت بروید. در آنجا باید دو فیلد با کد از قبل نوشته شده را ببینید: CSS و HTML.
به عنوان مثال، بیایید یک اکشن را پیکربندی کنیم که با کلیک کردن روی هدر ویجت اجرا شود. در فیلد HTML یک تگ سرصفحه پیدا کنید و شناسه اکشن خود را در آنجا وارد کنید. از آنجایی که نام در مثال test2 است، کد HTML به شکل زیر خواهد بود:

<h1 id='button2'>Value title</h1>

جایی که button2 نام اکشن است و عنوان مقدار متنی است که در هدر ویجت نشان داده می شود.

منابع اکشن ویجت نقشه

ویجت نقشه دارای منابع اکشن منحصر به فردی است که باید به طور جداگانه در نظر گرفته شوند. بیایید با افزودن ویجت نقشه شروع کنیم. به داشبوردی که نقشه شما در آن قرار می گیرد بروید و روی نماد سمت راست پایین «مداد» کلیک کنید:

اگر داشبورد جدید خالی دارید، فقط باید روی پیام در وسط «افزودن یک ویجت جدید» کلیک کنید و در منوی کشویی در انتهای لیست، «نقشه‌ها» را انتخاب کنید. سپس، یک منبع داده از ویجت خود اضافه کنید و روی «افزودن» کلیک کنید.
اگر قبلاً ویجت‌هایی به این داشبورد اضافه شده‌اند، روی نماد «کاغذ» («ایجاد ویجت جدید») کلیک کنید. در فهرست منوی کشویی تا انتهای لیست، «Maps» را انتخاب کنید. در نهایت، یک منبع داده از ویجت خود اضافه کنید و روی «افزودن» کلیک کنید.

افزودن یک اکشن به ویجت نقشه

اکنون زمان اضافه کردن یک اکشن است. برای انجام این کار، باید روی نماد «مداد» در سمت راست ویجت نقشه کلیک کنید تا وارد حالت «ویرایش ابزارک» شوید. به سلول “Action” بروید و در آنجا روی نماد “+” در سمت راست صفحه کلیک کنید. پنجره «افزودن اکشن» باز خواهد شد.

1. کلیک بر روی نشانگر

اکشن با کلیک بر روی نشانگر نقشه قرمز اجرا می شود.

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، منبع اکشن “کلیک بر روی نشانگر” را انتخاب کنید.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
وقتی همه تنظیمات مورد نیاز پیکربندی شدند، روی «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
اکنون اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع کنش، نماد و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

2. کلیک روی چند ضلعی

چند ضلعی شکل صفحه ای است که با تعداد محدودی نقطه توصیف می شود. ما از چند ضلعی استفاده می کنیم که بر اساس مختصاتی است که در دستگاه مورد استفاده ما مشخص شده است، اما شما می توانید از هر موجودیت دیگری استفاده کنید. شما می توانید دارایی های خود و هر موجودیت دیگری را با یک گزینه چند ضلعی علامت گذاری کنید. برای چند ضلعی می توانیم تنظیمات بعدی را مشخص کنیم. مختصات چند ضلعی در قالبی زیر دریافت می شود

[[1CoordinateLatitude,1CoordinateLatitude],[2CoordinateLatitude,2CoordinateLatitude]...[nCoordinateLatitude,nCoordinateLatitude]]

که در آن n – تعداد مختصاتی که چند ضلعی با آنها توصیف می شود. برای پیکربندی منبع اکشن کلیک روی چند ضلعی در ویجت Map، باید:

در حالت ویرایش ویجت به سلول «پیشرفته» بروید.
به تنظیمات چند ضلعی بروید، کادر “نمایش چند ضلعی” را علامت بزنید.
نام کلید Polygon را وارد کنید و آن را به خاطر بسپارید، بعداً استفاده می شود.
برای اعمال تغییرات، روی علامت تیک نارنجی در بالای سمت راست پنجره کلیک کنید.
برای ذخیره تغییرات روی نماد تیک پایین سمت راست کلیک کنید.
با منوی اصلی سمت چپ ThingsBoard به Assets بروید.
از لیست دارایی ها دارایی را که می خواهید چند ضلعی به آن اضافه کنید انتخاب کنید و آن را باز کنید.
در پنجره جزئیات دارایی ها، به سلول ویژگی ها بروید.
برای افزودن یک ویژگی جدید به دارایی، روی نماد “+” کلیک کنید.
در پنجره “افزودن ویژگی” یک کلید را وارد کنید – باید همان کلید نام کلید Polygon باشد.
نوع مقدار “Strings” و مختصات ورودی حجیم را برای چند ضلعی خود انتخاب کنید. در مثال از مختصات تصادفی استفاده می کنیم.
در پنجره «افزودن ویژگی» روی دکمه پایین سمت راست «افزودن» کلیک کنید.
با ویجت Map به داشبورد برگردید.
با کلیک کردن روی نماد «مداد» پایین سمت راست، وارد حالت ویرایش داشبورد شوید.
روی نماد “مداد” در گوشه سمت راست بالای ویجت نقشه کلیک کنید تا وارد حالت ویرایش آن شوید.
کلید داده ای را که به تازگی پیکربندی شده است به Datasources اضافه کنید. کافی است نام آن را تایپ کنید تا در لیست نشان داده شود.
پس از افزودن کلید داده جدید، تغییرات را اعمال کنید.
به آخرین سلول “اکشن ها” بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، یک منبع اکشن کلیک روی چند ضلعی را انتخاب کنید.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
وقتی همه تنظیمات مورد نیاز پیکربندی شدند، روی «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
اکنون اکشن پیکربندی شده را می بینید، بنابراین می توانید منبع کنش و نوع عمل را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک کردن روی نماد تیک نارنجی “اعمال تغییرات” در سمت راست پایین صفحه، تغییرات اعمال شده را ذخیره کنید.

برای اجرای یک اکشن در هر نقطه از چند ضلعی کلیک کنید.

3. اکشن تگ تولتیپ

هنگام کلیک بر روی نشانگر نقشه، یک تولتیپ ظاهر می شود. یک تولتیپ حاوی پیوندی است که یک اکشن را اجرا می کند. لطفاً توجه داشته باشید، در این راهنما یک روش اساسی برای استفاده از منبع اکشن تگ tooltip توضیح داده شده است. پیکربندی چندین پیوند برای دستگاه‌ها/دارایی‌های مختلف که مقادیر متفاوتی را برمی‌گردانند، امکان‌پذیر است. این کار را با تابع tooltip در حالت پیشرفته ویجت نقشه انجام دهید. برای پیکربندی اکشن تگ Tooltip ویجت Map، باید:

در حالت ویرایش ویجت به آخرین سلول «اکشن ها» بروید.
برای افزودن یک اکشن جدید، روی نماد “+” در سمت راست پنجره کلیک کنید.
در منوی کشویی بالا، منبع اکشن کلیک بر روی نشانگر را انتخاب کنید.
یک نام برای اکشن وارد کنید و مطمئن شوید که آن را به خاطر بسپارید، بعداً استفاده خواهد شد.
از آنجایی که مثال برای همه منابع اکشن، نوع اکشن «پیمایش به وضعیت جدید داشبورد» است، آن را در منوی کشویی Type انتخاب کنید.
پس از انتخاب نوع اکشن، منوی کشویی “وضعیت داشبورد هدف” ظاهر می شود. حالتی را که قبلاً ایجاد شده است که می‌خواهید به آن منتقل شوید انتخاب کنید.
وقتی همه تنظیمات مورد نیاز پیکربندی شدند، روی «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
اکنون اکشن پیکربندی شده را مشاهده می کنید، بنابراین می توانید منبع کنش، نماد و نوع اکشن را دوباره بررسی کنید.
تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
به سلول تنظیمات پیشرفته بروید.
به تنظیمات Tooltip بروید و کادر “Show tooltip” را علامت بزنید.
در خط Tooltip نام link-act را پیدا کنید و نام اکشن را در قالبی در آنجا وارد کنید

<link-act name='TooltipTag'>Navigate to the Building A</link-act>

که در آن TooltipTag یک نام اکشن است و پیمایش به ساختمان A متنی است که به عنوان یک پیوند در یک راهنمای ابزار نشان داده می شود.

تغییرات را با کلیک کردن روی نماد تیک نارنجی در سمت راست بالای پنجره اعمال کنید و سپس پنجره جزئیات را ببندید.
با کلیک بر روی نارنجی در پایین سمت راست صفحه، تغییرات اعمال شده را ذخیره کنید.

روی نشانگر نقشه کلیک کنید تا راهنمایی ابزار ظاهر شود. برای اجرای یک اکشن، روی متن پیوند در پایین راهنمای ابزار کلیک کنید.

تنظیمات اقدامات ویژه

باز کردن طرح داشبورد سمت راست (نمای تلفن همراه)

اغلب کاربران باید جزئیات به روز شده یک ویجت را در ویجت دیگر نزدیک آن ببینند. به عنوان مثال، ما لیستی از دارایی‌ها را در ویجت Entity Table داریم و می‌خواهیم جزئیات آنها را در ویجت نمودار نزدیک به‌روزرسانی کنیم. از روی دسکتاپ، با قرار دادن دو ویجت در نزدیکی یکدیگر و انتخاب نوع عملکرد «به‌روزرسانی داشبورد فعلی» به راحتی پیکربندی می‌شود، اما یک صفحه نمایش تلفن همراه تطبیقی به‌طور خودکار ویجت‌ها را زیر یکدیگر قرار می‌دهد، بنابراین برای مشاهده اطلاعات مورد نیاز در مورد دوم باید به پایین بروید.

ویژگی Layouts این مشکل را حل می کند. برای پیکربندی طرح‌بندی‌ها(layouts) و جابه‌جایی ویجت‌های از قبل ایجاد شده، باید:

با کلیک کردن روی نماد «مداد» در پایین سمت راست صفحه، وارد حالت ویرایش داشبورد شوید.
در سمت چپ بالای پنجره، روی “Manage layouts” کلیک کنید.
در پنجره باز شده «مدیریت طرح‌بندی‌ها»، کادر «راست» را علامت بزنید و روی «ذخیره» کلیک کنید. اکنون دو طرح داریم.
سپس، باید ویجت نمودار را به چیدمان مناسب منتقل کنیم. روی ویجت کلیک راست کرده و از منوی ظاهر شده گزینه Copy را انتخاب کنید.
در هر نقطه از طرح خالی کلیک راست کرده و از منوی ظاهر شده گزینه Paste را انتخاب کنید.
وقتی دو کپی از یک ویجت روی هر دو چیدمان داریم، بیایید با کلیک راست روی آن و انتخاب «حذف» در منوی ظاهر شده، یکی از طرح‌بندی اصلی را حذف کنیم. در پنجره تأیید گفتگوی باز شده روی “بله” کلیک کنید و ویجت حذف خواهد شد.
اندازه ویجت ها را با کشیدن لبه های آنها تنظیم کنید.

اکنون، برای فعال کردن اکشنی که امکان دیدن جزئیات یک ویجت را در ویجت دیگر با کلیک یک دکمه و بدون حرکت بیشتر می‌کند، نیاز دارید:

با کلیک بر روی نماد “مداد” در سمت راست بالای ویجت، وارد حالت ویرایش ویجت در طرح اصلی شوید.
به سلول «اکشن ها» بروید و روی نماد «+» کلیک کنید تا یک اکشن جدید اضافه کنید.
منبع اکشن مورد نظر را انتخاب کنید، در مثال، دکمه Action cell خواهد بود. نامی برای اکشن بگذارید، در حالت موبایل قابل مشاهده است. با کلیک بر روی یک تصویر نماد و انتخاب از بین انواع نمادها، نمادی را که نشان دهنده یک دکمه است (در صورت نیاز) انتخاب کنید.
یک نوع اکشن “به روز رسانی وضعیت داشبورد فعلی” را انتخاب کنید. یک حالت داشبورد هدف را انتخاب کنید – باید حالت داشبورد جایی باشد که طرح‌بندی‌ها ایجاد شده‌اند.
در نهایت، یک علامت “باز کردن طرح داشبورد سمت راست (نمایش تلفن همراه)” را علامت بزنید.
برای اعمال تغییرات روی “ذخیره” در پایین سمت راست پنجره گفتگو کلیک کنید.
در حالت ویرایش داشبورد، روی علامت تیک نارنجی در پایین سمت راست صفحه کلیک کنید.

اکنون در حالت موبایل، با کلیک بر روی یک دکمه اکشن، مستقیماً به ویجت مورد نیاز منتقل می شویم که در آن می توانیم جزئیات موجودیت های ویجت اصلی را مشاهده کنیم.

در یک گفتگوی جداگانه باز کنید

مواقعی وجود دارد که رفتن به یک وضعیت داشبورد جداگانه برای مشاهده جزئیات یک ویجت غیرعملی است، اما شما فقط می خواهید آن را در همان صفحه داشبورد باز کنید. برای این مواقع، یک دیالوگ باز کردن در یک ویژگی دیالوگ جداگانه وجود دارد که اجازه می دهد تا با استفاده از یک اکشن پیکربندی شده، حالت دیگری را در همان صفحه باز کنید. برای باز کردن یک وضعیت در یک پنجره گفتگوی جداگانه در داشبوردی که در آن هستید، باید:

با کلیک کردن روی نماد «مداد» در پایین سمت راست صفحه، وارد حالت ویرایش داشبورد شوید.
ابتدا باید یک حالت جدید اضافه کنیم، بنابراین روی دکمه “مدیریت وضعیت های داشبورد” در سمت چپ بالای داشبورد کلیک کنید.
در پنجره باز شده، روی نماد “+” کلیک کنید تا یک حالت جدید اضافه شود.
پس از افزودن یک وضعیت(state)، روی دکمه “ذخیره” در پایین سمت راست پنجره “Manage dashboard states” کلیک کنید.
اکنون با کلیک بر روی نماد “مداد” در سمت راست بالای ویجت، وارد حالت ویرایش ویجت شوید.
به سلول «اکشن ها» بروید و روی نماد «+» کلیک کنید تا یک اکشن جدید اضافه کنید.
منبع اکشن مورد نظر را انتخاب کنید، در مثال، دکمه Action cell خواهد بود. نامی برای اکشن بگذارید. با کلیک بر روی یک تصویر نماد و انتخاب از بین نمادهای مختلف، نمادی را که نشان دهنده یک دکمه است، انتخاب کنید.
از منوی کشویی یک نوع اکشن «پیمایش به داشبورد جدید» و یک حالت هدف، حالتی که در مرحله 3 ایجاد شده است را انتخاب کنید.
تیک کادر «باز کردن در گفتگوی جداگانه» را بزنید و یک عنوان به یک گفتگو بدهید.
به‌طور پیش‌فرض، چک باکس «مخفی کردن نوار ابزار داشبورد در گفتگو» تیک خورده است. اگر نیاز به مشاهده نوار ابزار در پنجره گفتگو دارید، باید علامت آن را بردارید. نوار ابزار موجودیت ها، پنجره زمانی، دکمه صادرات داشبورد و گسترش آن را به یک دکمه تمام صفحه نمایش می دهد.
تنظیم عرض و ارتفاع گفتگو بر حسب درصد اختیاری است. عرض نسبت به ارتفاع درگاه دید و ارتفاع به نسبت عرض است.
وقتی اکشن پیکربندی شد، روی دکمه «افزودن» در پایین سمت راست پنجره «افزودن اکشن» کلیک کنید.
وقتی اکشن اضافه شد، منبع اکشن، نماد و نوع اکشن را دوباره بررسی کنید. اگر همه چیز درست است، روی علامت تیک نارنجی در بالای سمت راست صفحه کلیک کنید.

اکنون زمان آن است که یک ویجت را به حالت دیگری اضافه کنید و یک اکشن را اجرا کنید. برای انجام آن باید:

به حالت تازه ایجاد شده و در عین حال خالی بروید و روی «افزودن ویجت جدید» در وسط صفحه کلیک کنید.
از منوی کشویی «بسته فعلی»، ویجت مورد نظر را انتخاب کنید، در مثال ما، ویجت نقشه «OpenStreetMap» است.
منابع داده را اضافه کنید و روی “افزودن” کلیک کنید.
ویجتی به حالت داشبورد اضافه شده است، لبه های آن را بکشید تا اندازه را تنظیم کنید.
پس از تنظیم، روی تیک نارنجی در پایین سمت چپ صفحه کلیک کنید تا تغییرات اعمال شده ذخیره شوند.

برای انجام یک اکشن و باز کردن یک پنجره محاوره ای با حالت، روی دکمه سلولی در مقابل نام موجودیت کلیک کنید.

موجودیت را از طریق ویجت تنظیم کنید

چک باکس تنظیم موجودیت از ویجت مسئول افزودن موجودیت خاص از ویجت به حالت است. این به شما امکان می دهد تا با ایجاد “موجودیت از وضعیت داشبورد” یا نام های مستعار دیگر از موجودیت در وضعیت داشبورد هدف استفاده کنید. برای مثال، اگر فهرستی از دستگاه‌ها را در ویجت جدول دارید و می‌خواهید هنگام کلیک کردن روی ردیف جدول، جزئیات دستگاه خاصی را نشان دهید.

گاهی اوقات شما نیاز دارید که بیش از یک موجودیت را در حالت ذخیره کنید. به عنوان مثال، شما می خواهید به لیست مشتریان، سپس به دستگاه های مشتری و در نهایت به جزئیات دستگاه خاص بروید. در چنین حالتی، ممکن است سه حالت داشته باشید: “اصلی”، “دستگاه های مشتری” و “جزئیات دستگاه”. می‌توانید از دو پارامتر موجودیت حالت مختلف برای ارجاع به مشتری فعلی (مانند «مشتری فعلی») و دستگاه فعلی (مانند «دستگاه فعلی») در وضعیت «جزئیات دستگاه» استفاده کنید.

توزیع کننده و نماینده ها

فروشگاه

اسناد سامانه اتصال اشیاء