6.7.2.1. Вариант 1. Отображение проигрывателя, встроенного во внешний портал

На внешнем портале (веб-сайте) существует реестр заявок на закуп. На внешнем портале существует заявка, которую необходимо заполнить и запустить на исполнение. Заявка представляет из себя форму в Synergy. Все заявки собираются в реестре заявок.

Форма содержит следующие компоненты:

• «Неизменяемый текст»
• «Однострочное поле»
• «Числовое поле»
• «Многострочный текст»
• «HTD-редактор»
• «Дата/время»
• «Файл»
• «Пользователь»
• «Должность»
• «Номер»
• «Ссылка на реестр»
• «Лист согласования»

Компоненты обладают разными свойствами:

• пустое либо предзаполненное поле
• обязательное поле
• нередактируемое поле
• поле ввода с настроенной маской
• ограниченные значения чисел
• автозаполнение создающим пользователем
• автозаполнение текущей датой

Исходный код JavaScript:

'use strict';

var synergyURL = "http://demoextfp.synergy.tm/Synergy/";
var tokenServiceURL = "http://demoextfp.synergy.tm/TokenService/rest/tokenService/getToken";

AS.OPTIONS.locale = "ru";
AS.OPTIONS.coreUrl = synergyURL;


var portal = {
    player: null,
    /**
     * показать сообщение об ошибке
     * @param{string} message
     */
    showMessage: function (message) {
        jQuery("#message_text").html(message);
        jQuery("#message").show();
    },
    /**
     * скрыть панель сообщений
     */
    hideMessage: function () {
        jQuery("#message").hide();
    },
    /**
     * очистить текущий проигрыватель форм
     */
    clearPlayer: function () {
        if (portal.player) {
            portal.player.destroy();
        }
        jQuery("#send_button").hide();
        portal.player = null;
    },
    /**
     * добавить новый проигрыватель форм
     */
    createPlayer: function (dataId) {

        portal.clearPlayer();
        portal.player = AS.FORMS.createPlayer();
        AS.FORMS.bus.on(AS.FORMS.EVENT_TYPE.formShow, function (event, model, view) {
            model.on(AS.FORMS.EVENT_TYPE.dataLoad, function () {

            });

            if (view.editable) {
                jQuery("#send_button").show();
                jQuery("#send_button").removeAttr('disabled', 'disabled');
            }

        });


        portal.player.view.setEditable(_.isUndefined(dataId));
        portal.player.showFormData("7dd2a298-0cb7-4ec7-ba67-ecc59c86e1aa", 0, dataId);


        portal.player.view.appendTo($('#form_player_div'));

        portal.player.model.on("valueChange", function () {
            portal.hideMessage();
        });

    },
    /**
     * искать форму по указанному номеру
     */
    searchData: function () {

        var counterValue = jQuery("#search_input").val();
        AS.FORMS.ApiUtils.simpleAsyncGet("rest/api/asforms/search?formUUID=7dd2a298-0cb7-4ec7-ba67-ecc59c86e1aa&search=" + encodeURIComponent(counterValue) + "&field=counter&type=exact", function (data) {

            if (data === null || !(data instanceof Array) || data.length === 0) {
                portal.showMessage("Заявка с указанным номером не найдена");
                return;
            }
            var dataId = data[0];
            portal.createPlayer(dataId);
        });
    },
    /**
     * сохранить данные, получить их, отобразить номер счетчика для дальнейшего поиска
     */
    saveData: function () {
        var errors = portal.player.model.getErrors();
        if (errors.length > 0) {
            portal.showMessage("Введите все обязательные поля");
            return;
        }

        jQuery("#send_button").attr('disabled', 'disabled');

        var counterValue = portal.player.model.getModelWithId('counter').getValue();

        AS.FORMS.ApiUtils.simpleAsyncGet("rest/api/registry/create_doc?registryID=59ad0163-2eac-460a-af1f-c0f7c7757dec", function (result) {
            if (result.errorCode != 0) {
                portal.showMessage("Во время сохранения данных по форме произошли ошибки. Обратитесь к администратору");
                return;
            }
            portal.player.model.asfDataId = result.dataUUID;
            portal.player.saveFormData(function (result) {

                if (_.isUndefined(result)) {
                    portal.showMessage("Во время сохранения данных по форме произошли ошибки. Обратитесь к администратору");
                    return;
                }

                AS.FORMS.ApiUtils.simpleAsyncGet('rest/api/asforms/data/' + result, function (data) {

                    data.data.forEach(function (value) {
                        if (value.id === 'counter') {
                            counterValue = value.value;
                            portal.showMessage("Ваша заявка была принята в обработку. Номер заявки - " + counterValue);
                        }
                    });
                });
                portal.clearPlayer();
            });
        });
    }
};


$(document).ready(function () {

    jQuery.ajax({
        method: "GET",
        url: tokenServiceURL + "?url=" + synergyURL,
        success: function (data) {
            AS.OPTIONS.login = "$key";
            AS.OPTIONS.password = data;

            portal.createPlayer();
        }
    });


    jQuery(document).mouseup(function (e) {
        var container = jQuery("#message");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.hide();
        }
    });
});

Исходный код CSS:

body, div, span, input, button{
    font-family: "Droid Sans", arial, serif;
    font-size:14px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.hidden{
    display:none;
}

.portal_button{
    background-color: #df6c6d;
    border-color: #df6c6d;
    color: #ffffff;
    padding-left:20px;
    padding-right:20px;
    height:30px;
    border:none;
    margin-left:10px;
    margin-right:10px;
}

.portal-center {
    text-align:center;
    vertical-align:top
}

.portal-toolbar {
    padding:10px;
    color:#6e8ebd
}

#form_player_container{
    /* border: 3px solid #6e8ebd; */
    outline: 1px #ffffff solid;
    margin-left:auto;
    margin-right:auto;
    width:1000px;
    min-height:400px;
    background-color: #ffffff;
    padding-top:20px;
    padding-bottom:60px;
    margin-bottom:20px;

}

#form_player_div{
    width:650px;
    min-height:200px;
}

#search_input {
    background-color:#6e8ebd ;
    border: 1px #6e8ebd solid;
    height:30px;
    width:200px;
    padding-left:10px
}

#send_button{
    margin-left:auto;
    margin-right:auto;
    width:200px;
    margin-bottom:20px;
}

#message{
    background-color:#ffffff;
    border: 3px solid #df6c6d ;
    outline: 1px #932121 solid;
    z-index: 2;
    position:absolute;
    top:100px;
    left: 30%;
    color:#303030;
    padding:10px;
    max-width:40%;
    min-width:40%;
}

#message_text{
    color:#303030;
}