Merge pull request #698 from ONLYOFFICE/feature/submit-forms

Feature/submit forms

apps/common/main/lib/component/SynchronizeTip.js

@@ -111,6 +111,8 @@ define([
                 } else
                 if (this.placement == 'top')
                     this.cmpEl.css({bottom : innerHeight - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'});
+                else if (this.placement == 'bottom')
+                    this.cmpEl.css({top : (showxy.top+5) + this.target.height() + 'px', left: showxy.left + (this.target.width() - this.cmpEl.width())/2 + 'px'});
                 else if (this.placement == 'target') {
                     this.cmpEl.css({top : (showxy.top+5) + 'px', left: (showxy.left+5) + 'px'});
                 } else {// left or right

apps/documenteditor/main/app/controller/FormsTab.js

@@ -70,6 +70,9 @@ define([
                 Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
                 this.api.asc_registerCallback('asc_onChangeSpecialFormsGlobalSettings', _.bind(this.onChangeSpecialFormsGlobalSettings, this));
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+                this.api.asc_registerCallback('asc_onStartAction', _.bind(this.onLongActionBegin, this));
+                this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this));
+                this.api.asc_registerCallback('asc_onError', _.bind(this.onError, this));
 
                 // this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this));
                 // this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this));
@@ -79,8 +82,10 @@ define([
 
         setConfig: function(config) {
             this.toolbar = config.toolbar;
+            this.appConfig = config.config;
             this.view = this.createView('FormsTab', {
-                toolbar: this.toolbar.toolbar
+                toolbar: this.toolbar.toolbar,
+                config: config.config
             });
             this.addListeners({
                 'FormsTab': {
@@ -89,7 +94,9 @@ define([
                     'forms:clear': this.onClearClick,
                     'forms:no-color': this.onNoControlsColor,
                     'forms:select-color': this.onSelectControlsColor,
-                    'forms:mode': this.onModeClick
+                    'forms:mode': this.onModeClick,
+                    'forms:goto': this.onGoTo,
+                    'forms:submit': this.onSubmitClick
                 }
             });
         },
@@ -98,6 +105,10 @@ define([
             this.view && this.view.SetDisabled(state);
         },
 
+        createToolbarPanel: function() {
+            return this.view.getPanel();
+        },
+
         getView: function(name) {
             return !name && this.view ?
                 this.view : Backbone.Controller.prototype.getView.call(this, name);
@@ -108,7 +119,7 @@ define([
         },
 
         onApiFocusObject: function(selectedObjects) {
-            if (!this.toolbar.editMode) return;
+            if (!this.toolbar.editMode || this.appConfig.isRestrictedEdit) return;
 
             var pr, i = -1, type,
                 paragraph_locked = false,
@@ -215,6 +226,17 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
+        onGoTo: function(type) {
+            if (this.api)
+                this.api.asc_MoveToFillingForm(type=='next');
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onSubmitClick: function() {
+            this.api.asc_SendForm();
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
         disableEditing: function(disable) {
             if (this._state.DisabledEditing != disable) {
                 this._state.DisabledEditing = disable;
@@ -237,12 +259,46 @@ define([
             }
         },
 
+        onLongActionBegin: function(type, id) {
+            if (id==Asc.c_oAscAsyncAction['Submit'] && this.view.btnSubmit) {
+                this._submitFail = false;
+                this.submitedTooltip && this.submitedTooltip.hide();
+                this.view.btnSubmit.setDisabled(true);
+            }
+        },
+
+        onLongActionEnd: function(type, id) {
+            if (id==Asc.c_oAscAsyncAction['Submit'] && this.view.btnSubmit) {
+                this.view.btnSubmit.setDisabled(false);
+                if (!this.submitedTooltip) {
+                    this.submitedTooltip = new Common.UI.SynchronizeTip({
+                        text: this.view.textSubmited,
+                        extCls: 'no-arrow',
+                        showLink: false,
+                        target: $('.toolbar'),
+                        placement: 'bottom'
+                    });
+                    this.submitedTooltip.on('closeclick', function () {
+                        this.submitedTooltip.hide();
+                    }, this);
+                }
+                !this._submitFail && this.submitedTooltip.show();
+            }
+        },
+
+        onError: function(id, level, errData) {
+            if (id==Asc.c_oAscError.ID.Submit) {
+                this._submitFail = true;
+                this.submitedTooltip && this.submitedTooltip.hide();
+            }
+        },
+
         onAppReady: function (config) {
             var me = this;
             (new Promise(function (accept, reject) {
                 accept();
             })).then(function(){
-                if (config.canEditContentControl) {
+                if (config.canEditContentControl && me.view.btnHighlight) {
                     var clr = me.api.asc_GetSpecialFormsHighlightColor();
                     clr && (clr = Common.Utils.ThemeColor.getHexColor(clr.get_r(), clr.get_g(), clr.get_b()));
                     me.view.btnHighlight.currentColor = clr;

apps/documenteditor/main/app/controller/Main.js

@@ -1301,6 +1301,7 @@ define([
                 this.appOptions.canProtect     = (this.appOptions.isSignatureSupport || this.appOptions.isPasswordSupport);
                 this.appOptions.canEditContentControl = (this.permissions.modifyContentControl!==false);
                 this.appOptions.canHelp        = !((typeof (this.editorConfig.customization) == 'object') && this.editorConfig.customization.help===false);
+                this.appOptions.canSubmitForms = this.appOptions.canLicense && (typeof (this.editorConfig.customization) == 'object') && !!this.editorConfig.customization.submitForm;
                 this.appOptions.canFillForms   = this.appOptions.canLicense && ((this.permissions.fillForms===undefined) ? this.appOptions.isEdit : this.permissions.fillForms) && (this.editorConfig.mode !== 'view');
                 this.appOptions.isRestrictedEdit = !this.appOptions.isEdit && (this.appOptions.canComments || this.appOptions.canFillForms);
                 if (this.appOptions.isRestrictedEdit && this.appOptions.canComments && this.appOptions.canFillForms) // must be one restricted mode, priority for filling forms
@@ -1663,6 +1664,10 @@ define([
                         config.msg = this.errorSetPassword;
                         break;
 
+                    case Asc.c_oAscError.ID.Submit:
+                        config.msg = this.errorSubmit;
+                        break;
+
                     default:
                         config.msg = (typeof id == 'string') ? id : this.errorDefaultMessage.replace('%1', id);
                         break;
@@ -2834,7 +2839,8 @@ define([
             textRenameLabel: 'Enter a name to be used for collaboration',
             textRenameError: 'User name must not be empty.',
             textLongName: 'Enter a name that is less than 128 characters.',
-            textGuest: 'Guest'
+            textGuest: 'Guest',
+            errorSubmit: 'Submit failed.'
         }
     })(), DE.Controllers.Main || {}))
 });

apps/documenteditor/main/app/controller/Toolbar.js

@@ -3055,8 +3055,8 @@ define([
         onAppShowed: function (config) {
             var me = this;
 
-            var compactview = !config.isEdit;
+            var compactview = !(config.isEdit || config.isRestrictedEdit && config.canFillForms);
-            if ( config.isEdit ) {
+            if ( config.isEdit || config.isRestrictedEdit && config.canFillForms) {
                 if ( Common.localStorage.itemExists("de-compact-toolbar") ) {
                     compactview = Common.localStorage.getBool("de-compact-toolbar");
                 } else
@@ -3102,15 +3102,21 @@ define([
                 var links = me.getApplication().getController('Links');
                 links.setApi(me.api).setConfig({toolbar: me});
                 Array.prototype.push.apply(me.toolbar.toolbarControls, links.getView('Links').getButtons());
-
+            }
-                if (config.canFeatureContentControl) {
+            if ( config.isEdit && config.canFeatureContentControl || config.isRestrictedEdit && config.canFillForms ) {
                 tab = {caption: me.textTabForms, action: 'forms'};
                 var forms = me.getApplication().getController('FormsTab');
-                    forms.setApi(me.api).setConfig({toolbar: me});
+                forms.setApi(me.api).setConfig({toolbar: me, config: config});
+                $panel = forms.createToolbarPanel();
+                if ($panel) {
                     me.toolbar.addTab(tab, $panel, 4);
                     me.toolbar.setVisible('forms', true);
+                    if (config.isEdit && config.canFeatureContentControl) {
                         Array.prototype.push.apply(me.toolbar.toolbarControls, forms.getView('FormsTab').getButtons());
                         me.onChangeSdtGlobalSettings();
+                    } else if (!compactview) {
+                        me.toolbar.setTab('forms');
+                    }
                 }
             }
         },

apps/documenteditor/main/app/controller/Viewport.js

@@ -165,7 +165,7 @@ define([
 
             me.viewport.$el.attr('applang', me.appConfig.lang.split(/[\-_]/)[0]);
 
-            if ( !config.isEdit ||
+            if ( !(config.isEdit || config.isRestrictedEdit && config.canFillForms) ||
                 ( !Common.localStorage.itemExists("de-compact-toolbar") &&
                 config.customization && config.customization.compactToolbar )) {
 
@@ -205,8 +205,8 @@ define([
         onAppReady: function (config) {
             var me = this;
             if ( me.header.btnOptions ) {
-                var compactview = !config.isEdit;
+                var compactview = !(config.isEdit || config.isRestrictedEdit && config.canFillForms);
-                if ( config.isEdit ) {
+                if ( config.isEdit || config.isRestrictedEdit && config.canFillForms) {
                     if ( Common.localStorage.itemExists("de-compact-toolbar") ) {
                         compactview = Common.localStorage.getBool("de-compact-toolbar");
                     } else
@@ -223,7 +223,7 @@ define([
                 if (!config.isEdit) {
                     me.header.mnuitemCompactToolbar.hide();
                     Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
-                        if ((action=='plugins' || action=='review') && visible) {
+                        if ((action=='plugins' || action=='review' || action=='forms') && visible) {
                             me.header.mnuitemCompactToolbar.show();
                         }
                     }, this));

apps/documenteditor/main/app/template/Toolbar.template

@@ -174,29 +174,6 @@
                     </div>
                 </div>
             </section>
-            <section class="panel" data-tab="forms">
-                <div class="group">
-                    <span class="btn-slot text x-huge" id="slot-btn-form-field"></span>
-                    <span class="btn-slot text x-huge" id="slot-btn-form-combobox"></span>
-                    <span class="btn-slot text x-huge" id="slot-btn-form-dropdown"></span>
-                    <span class="btn-slot text x-huge" id="slot-btn-form-checkbox"></span>
-                    <span class="btn-slot text x-huge" id="slot-btn-form-radiobox"></span>
-                    <span class="btn-slot text x-huge" id="slot-btn-form-image"></span>
-                </div>
-                <div class="separator long"></div>
-                <div class="group no-group-mask form-view">
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-form-clear-fields"></span>
-                    </div>
-                    <div class="elset">
-                        <span class="btn-slot text" id="slot-form-highlight"></span>
-                    </div>
-                </div>
-                <div class="separator long"></div>
-                <div class="group no-group-mask form-view">
-                    <span class="btn-slot text x-huge" id="slot-btn-form-view"></span>
-                </div>
-            </section>
         </section>
     </section>
 </div>

apps/documenteditor/main/app/view/FormsTab.js

@@ -47,33 +47,67 @@ define([
     'use strict';
 
     DE.Views.FormsTab = Common.UI.BaseView.extend(_.extend((function(){
+        var template =
+        '<section class="panel" data-tab="forms">' +
+            '<div class="group" style="display: none;">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-field"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-combobox"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-dropdown"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-checkbox"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-radiobox"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-image"></span>' +
+            '</div>' +
+            '<div class="separator long forms" style="display: none;"></div>' +
+            '<div class="group no-group-mask form-view" style="display: none;">' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-form-clear-fields"></span>' +
+                '</div>' +
+                '<div class="elset">' +
+                    '<span class="btn-slot text" id="slot-form-highlight"></span>' +
+                '</div>' +
+            '</div>' +
+            '<div class="group no-group-mask form-view">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-clear"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-prev"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-next"></span>' +
+            '</div>' +
+            '<div class="separator long submit" style="display: none;"></div>' +
+            '<div class="group no-group-mask form-view" style="display: none;">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-view"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-submit"></span>' +
+            '</div>' +
+        '</section>';
+
         function setEvents() {
             var me = this;
-            this.btnTextField.on('click', function (b, e) {
+            this.btnTextField && this.btnTextField.on('click', function (b, e) {
                 me.fireEvent('forms:insert', ['text']);
             });
-            this.btnComboBox.on('click', function (b, e) {
+            this.btnComboBox && this.btnComboBox.on('click', function (b, e) {
                 me.fireEvent('forms:insert', ['combobox']);
             });
-            this.btnDropDown.on('click', function (b, e) {
+            this.btnDropDown && this.btnDropDown.on('click', function (b, e) {
                 me.fireEvent('forms:insert', ['dropdown']);
             });
-            this.btnCheckBox.on('click', function (b, e) {
+            this.btnCheckBox && this.btnCheckBox.on('click', function (b, e) {
                 me.fireEvent('forms:insert', ['checkbox']);
             });
-            this.btnRadioBox.on('click', function (b, e) {
+            this.btnRadioBox && this.btnRadioBox.on('click', function (b, e) {
                 me.fireEvent('forms:insert', ['radiobox']);
             });
-            this.btnImageField.on('click', function (b, e) {
+            this.btnImageField && this.btnImageField.on('click', function (b, e) {
                 me.fireEvent('forms:insert', ['picture']);
             });
-            this.btnViewForm.on('click', function (b, e) {
+            this.btnViewForm && this.btnViewForm.on('click', function (b, e) {
                 me.fireEvent('forms:mode', [b.pressed]);
             });
-            if (this.mnuFormsColorPicker) {
+            this.btnClearFields && this.btnClearFields.on('click', function (b, e) {
-                this.btnClearFields.on('click', function (b, e) {
                 me.fireEvent('forms:clear');
             });
+            this.btnClear && this.btnClear.on('click', function (b, e) {
+                me.fireEvent('forms:clear');
+            });
+            if (this.mnuFormsColorPicker) {
                 $('#id-toolbar-menu-new-form-color').on('click', function (b, e) {
                     me.fireEvent('forms:new-color');
                 });
@@ -87,6 +121,15 @@ define([
                     me.fireEvent('forms:open-color', [color]);
                 });
             }
+            this.btnPrevForm && this.btnPrevForm.on('click', function (b, e) {
+                me.fireEvent('forms:goto', ['prev']);
+            });
+            this.btnNextForm && this.btnNextForm.on('click', function (b, e) {
+                me.fireEvent('forms:goto', ['next']);
+            });
+            this.btnSubmit && this.btnSubmit.on('click', function (b, e) {
+                me.fireEvent('forms:submit');
+            });
         }
 
         return {
@@ -96,14 +139,20 @@ define([
             initialize: function (options) {
                 Common.UI.BaseView.prototype.initialize.call(this);
                 this.toolbar = options.toolbar;
+                this.appConfig = options.config;
 
                 this.paragraphControls = [];
 
-                var me = this,
+                var me = this;
-                    $host = me.toolbar.$el;
 
+                if (this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) {
+                    this.btnClear = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'toolbar__icon btn-clear',
+                        caption: this.textClear
+                    });
+                } else {
                     this.btnTextField = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-form-field'),
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-text-field',
                         caption: this.capBtnText,
@@ -112,7 +161,6 @@ define([
                     this.paragraphControls.push(this.btnTextField);
 
                     this.btnComboBox = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-form-combobox'),
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-combo-box',
                         caption: this.capBtnComboBox,
@@ -121,7 +169,6 @@ define([
                     this.paragraphControls.push(this.btnComboBox);
 
                     this.btnDropDown = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-form-dropdown'),
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-dropdown',
                         caption: this.capBtnDropDown,
@@ -130,7 +177,6 @@ define([
                     this.paragraphControls.push(this.btnDropDown);
 
                     this.btnCheckBox = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-form-checkbox'),
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-checkbox',
                         caption: this.capBtnCheckBox,
@@ -139,7 +185,6 @@ define([
                     this.paragraphControls.push(this.btnCheckBox);
 
                     this.btnRadioBox = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-form-radiobox'),
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-radio-button',
                         caption: this.capBtnRadioBox,
@@ -148,7 +193,6 @@ define([
                     this.paragraphControls.push(this.btnRadioBox);
 
                     this.btnImageField = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-form-image'),
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-insertimage',
                         caption: this.capBtnImage,
@@ -157,7 +201,6 @@ define([
                     this.paragraphControls.push(this.btnImageField);
 
                     this.btnViewForm = new Common.UI.Button({
-                    parentEl: $host.find('#slot-btn-form-view'),
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-sheet-view',
                         caption: this.capBtnView,
@@ -167,7 +210,6 @@ define([
                     this.paragraphControls.push(this.btnViewForm);
 
                     this.btnClearFields = new Common.UI.Button({
-                    parentEl    : $host.find('#slot-form-clear-fields'),
                         cls         : 'btn-toolbar',
                         iconCls     : 'toolbar__icon btn-clearstyle',
                         caption     : this.textClearFields,
@@ -176,7 +218,6 @@ define([
                     this.paragraphControls.push(this.btnClearFields);
 
                     this.btnHighlight = new Common.UI.ButtonColored({
-                    parentEl    : $host.find('#slot-form-highlight'),
                         cls         : 'btn-toolbar',
                         iconCls     : 'toolbar__icon btn-highlight',
                         caption     : this.textHighlight,
@@ -184,12 +225,38 @@ define([
                         disabled: true
                     });
                     this.paragraphControls.push(this.btnHighlight);
+                }
+
+                this.btnPrevForm = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-review-prev',
+                    caption: this.capBtnPrev
+                });
+                this.paragraphControls.push(this.btnPrevForm);
+
+                this.btnNextForm = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-review-next',
+                    caption: this.capBtnNext
+                });
+                this.paragraphControls.push(this.btnNextForm);
+
+                if (this.appConfig.canSubmitForms) {
+                    this.btnSubmit = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'toolbar__icon btn-form-submit',
+                        caption: this.capBtnSubmit
+                    });
+                    this.paragraphControls.push(this.btnSubmit);
+                }
 
                 this._state = {disabled: false};
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
 
             render: function (el) {
+                if ( el ) el.html( this.getPanel() );
+
                 return this;
             },
             
@@ -198,6 +265,7 @@ define([
                 (new Promise(function (accept, reject) {
                     accept();
                 })).then(function(){
+                    if (config.isEdit && config.canFeatureContentControl) {
                         if (config.canEditContentControl) {
                             me.btnHighlight.setMenu(new Common.UI.Menu({
                                 items: [
@@ -233,11 +301,50 @@ define([
                         me.btnRadioBox.updateHint(me.tipRadioBox);
                         me.btnImageField.updateHint(me.tipImageField);
                         me.btnViewForm.updateHint(me.tipViewForm);
+                    } else {
+                        me.btnClear.updateHint(me.textClearFields);
+                    }
+                    me.btnPrevForm.updateHint(me.tipPrevForm);
+                    me.btnNextForm.updateHint(me.tipNextForm);
+                    me.btnSubmit && me.btnSubmit.updateHint(me.tipSubmit);
 
                     setEvents.call(me);
                 });
             },
 
+            getPanel: function () {
+                this.$el = $(_.template(template)( {} ));
+                var $host = this.$el;
+
+                if (this.appConfig.canSubmitForms) {
+                    this.btnSubmit.render($host.find('#slot-btn-form-submit'));
+                }
+
+                if (this.appConfig.isRestrictedEdit && this.appConfig.canFillForms) {
+                    this.btnClear.render($host.find('#slot-btn-form-clear'));
+                    this.btnSubmit && $host.find('.separator.submit').show().next('.group').show();
+                } else {
+                    this.btnTextField.render($host.find('#slot-btn-form-field'));
+                    this.btnComboBox.render($host.find('#slot-btn-form-combobox'));
+                    this.btnDropDown.render($host.find('#slot-btn-form-dropdown'));
+                    this.btnCheckBox.render($host.find('#slot-btn-form-checkbox'));
+                    this.btnRadioBox.render($host.find('#slot-btn-form-radiobox'));
+                    this.btnImageField.render($host.find('#slot-btn-form-image'));
+                    this.btnViewForm.render($host.find('#slot-btn-form-view'));
+                    this.btnClearFields.render($host.find('#slot-form-clear-fields'));
+                    this.btnHighlight.render($host.find('#slot-form-highlight'));
+
+                    var separator_forms = $host.find('.separator.forms');
+                    separator_forms.prev('.group').show();
+                    separator_forms.show().next('.group').show();
+                    $host.find('.separator.submit').show().next('.group').show();
+                }
+                this.btnPrevForm.render($host.find('#slot-btn-form-prev'));
+                this.btnNextForm.render($host.find('#slot-btn-form-next'));
+
+                return this.$el;
+            },
+
             show: function () {
                 Common.UI.BaseView.prototype.show.call(this);
                 this.fireEvent('show', this);
@@ -273,7 +380,15 @@ define([
             tipImageField: 'Insert image',
             tipViewForm: 'Fill form mode',
             textNoHighlight: 'No highlighting',
-            textNewColor: 'Add New Custom Color'
+            textNewColor: 'Add New Custom Color',
+            textClear: 'Clear Fields',
+            capBtnPrev: 'Previous Field',
+            capBtnNext: 'Next Field',
+            capBtnSubmit: 'Submit',
+            tipPrevForm: 'Go to the previous field',
+            tipNextForm: 'Go to the next field',
+            tipSubmit: 'Submit form',
+            textSubmited: 'Form submitted successfully'
         }
     }()), DE.Views.FormsTab || {}));
 });

apps/documenteditor/main/app/view/Toolbar.js

@@ -1281,7 +1281,7 @@ define([
                     me.$el.html(me.rendererComponents(me.$layout));
                 } else {
                     me.$layout.find('.canedit').hide();
-                    me.$layout.addClass('folded');
+                    me.isCompactView && me.$layout.addClass('folded');
                     me.$el.html(me.$layout);
                 }
 

apps/documenteditor/main/locale/en.json

@@ -818,6 +818,7 @@
   "DE.Controllers.Main.warnNoLicense": "You've reached the limit for simultaneous connections to %1 editors. This document will be opened for viewing only.<br>Contact %1 sales team for personal upgrade terms.",
   "DE.Controllers.Main.warnNoLicenseUsers": "You've reached the user limit for %1 editors. Contact %1 sales team for personal upgrade terms.",
   "DE.Controllers.Main.warnProcessRightsChange": "You have been denied the right to edit the file.",
+  "DE.Controllers.Main.errorSubmit": "Submit failed.",
   "DE.Controllers.Navigation.txtBeginning": "Beginning of document",
   "DE.Controllers.Navigation.txtGotoBeginning": "Go to the beginning of the document",
   "DE.Controllers.Statusbar.textHasChanges": "New changes have been tracked",
@@ -1742,6 +1743,14 @@
   "DE.Views.FormsTab.tipRadioBox": "Insert radio button",
   "DE.Views.FormsTab.tipTextField": "Insert text field",
   "DE.Views.FormsTab.tipViewForm": "Fill form mode",
+  "DE.Views.FormsTab.textClear": "Clear Fields",
+  "DE.Views.FormsTab.capBtnPrev": "Previous Field",
+  "DE.Views.FormsTab.capBtnNext": "Next Field",
+  "DE.Views.FormsTab.capBtnSubmit": "Submit",
+  "DE.Views.FormsTab.tipPrevForm": "Go to the previous field",
+  "DE.Views.FormsTab.tipNextForm": "Go to the next field",
+  "DE.Views.FormsTab.tipSubmit": "Submit form",
+  "DE.Views.FormsTab.textSubmited": "Form submitted successfully",
   "DE.Views.HeaderFooterSettings.textBottomCenter": "Bottom center",
   "DE.Views.HeaderFooterSettings.textBottomLeft": "Bottom left",
   "DE.Views.HeaderFooterSettings.textBottomPage": "Bottom of Page",