Как интегрировать автономный плагин formio в проект angular - PullRequest
Новая
       9

Как интегрировать автономный плагин formio в проект angular

0 голосов
/ 12 февраля 2020

Я успешно интегрировал API Formio в angular проект, и форма, которую я создал в fromio, отображается в пользовательском интерфейсе angular8. Я также реализовал языковые переводы на той же странице, и она работает нормально. Попытка интеграции оффлайн плагина formio, любой указатель о том, как зарегистрировать оффлайн плагин в версии angular8.

Ссылка: https://help.form.io/developer/offline/#offlineapi, но не удалось найти подробности для автономной реализации angular8

1 Ответ

0 голосов
/ 24 февраля 2020

Он реализован и работает нормально, ниже приведены шаги:

Примечание: автономный плагин будет работать только с Formio Enterprise версии

Step1: пакет. json - Убедитесь, что formio-offline- плагин и зависимости 

"formio-plugin-offline": "formio/formio-plugin-offline",
"formiojs": "^4.9.0-beta.4",
"angular-formio": "^4.5.3",
"@angular/-packages-": "8.2.14" or higher versions

Step2:
Создать автономный сервис (offline.service.ts) и импортировать его в приложение-модуль

Шаг 3: добавить приведенный ниже код в файл сервиса 

import { Injectable, EventEmitter } from '@angular/core';
import { Formio } from 'angular-formio';
import { AppConfig } from '../../../config/app.config';

const FormioOfflineProject = require('formio-plugin-offline/index').default;

@Injectable({
  providedIn: 'root'
})

export class OfflineService {
  public onlineChange: EventEmitter<any> = new EventEmitter();
  public offlinePlugin;
  public offlineCount = 0;
  public offlineOps: any = {};
  public offlineSubmissions = [];
  constructor() {
    this.onOfflineServiceInit();
  }

  /**
 * This Function is used to load all the on inti functions
 * @memberOf Formio Offline Line service (OfflineService)
 */
  public onOfflineServiceInit() {
    this.registerOfflinePlugin();
    this.registerEventsForOffline();
    this.checkOfflineStatus();
    this.updateOfflineCount();
  }

  /**
 * This Function is used to Register Formio Offline Plugin
 * @memberOf Formio Offline Line service (OfflineService)
 */
  public registerOfflinePlugin() {
      this.offlinePlugin = new FormioOfflineProject(AppConfig.appUrl);
      Formio.registerPlugin(this.offlinePlugin, `offline-plugin`);
  }

    /**
 * This Function is used to Register Formio event lisentenr
 * @memberOf Formio Offline Line service (OfflineService)
 */
 public registerEventsForOffline() {
   Formio.events.on('offline.saveQueue', () => this.updateOfflineCount());
   Formio.events.on('offline.queue', () => this.updateOfflineCount());
  }




  /**
 * This Function is used to check Formio Offline Plugin
 * @memberOf Formio Offline Line service (OfflineService)
 */
  public checkOfflineStatus() {
      this.offlinePlugin.ready.then(() => {
          console.log('Plugin is ready');
        });
  }

  /**
   * This Function is used to check Formio Offline Plugin
   * @memberOf Formio Offline Line service (OfflineService)
   */
  public updateOfflineCount() {
      this.offlinePlugin.ready.then(() => {
        // If we are offline, then check the submission queue length.
        this.offlineCount = this.offlinePlugin.submissionQueueLength();
        this.offlineOps = {};
        if (this.offlineCount > 0) {
          this.offlineSubmissions = this.offlinePlugin.submissionQueue.map((queued) => {
            this.offlineOps[queued.request._id] = queued.request.method;
            return queued.request;
          });
        } else {
          this.offlineSubmissions = [];
        }
      });
      console.log("COUNT-------------"+this.offlineCount);
      console.log(this.offlineSubmissions);
    }
}

Шаг 4:

  1. Чтобы смоделировать автономное подключение: Откройте консоль разработчика chrome (вкладка сеть) и измените подключение на автономное. (при условии, что inte rnet связь потеряна). См. изображение ниже. enter image description here
  2. Теперь отправьте форму, созданную в formio и отображаемую в приложении angular. Ожидаемое поведение: Форма будет успешно отправлена, а данные будут храниться локально с помощью плагина formio offline.
  3. Когда приложение подключено к сети, сохраненные данные будут отправлены в form.io с зарегистрированным formio api
...