[PDF] Add forms tab

apps/pdfeditor/main/app.js

@@ -145,6 +145,7 @@ require([
             'InsTab',
             'Search',
             'Print',
+            'FormsTab',
             'Common.Controllers.Fonts',
             'Common.Controllers.Chat',
             'Common.Controllers.Comments',
@@ -179,6 +180,7 @@ require([
                 'pdfeditor/main/app/controller/InsTab',
                 'pdfeditor/main/app/controller/Search',
                 'pdfeditor/main/app/controller/Print',
+                'pdfeditor/main/app/controller/FormsTab',
                 'common/main/lib/util/utils',
                 'common/main/lib/controller/Fonts',
                 'common/main/lib/controller/Comments',

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

@@ -0,0 +1,317 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2024
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  FormsTab.js
+ *
+ *  Created on 04.03.2025
+ *
+ */
+
+define([
+    'core',
+    'pdfeditor/main/app/view/FormsTab'
+], function () {
+    'use strict';
+
+    PDFE.Controllers.FormsTab = Backbone.Controller.extend(_.extend({
+        models : [],
+        collections : [
+        ],
+        // views : [
+        //     'FormsTab'
+        // ],
+        sdkViewName : '#id_main',
+
+        initialize: function () {
+        },
+        onLaunch: function () {
+            this._state = {};
+        },
+
+        setApi: function (api) {
+            if (api) {
+                this.api = api;
+                this.api.asc_registerCallback('asc_onFocusObject', this.onApiFocusObject.bind(this));
+                this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this));
+                Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, 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_onDownloadUrl', _.bind(this.onDownloadUrl, this));
+            }
+            return this;
+        },
+
+        setConfig: function(config) {
+            this.toolbar = config.toolbar;
+            this.appConfig = config.config;
+            this.views = this.getApplication().getClasseRefs('view', ['FormsTab']);
+            this.view = this.createView('FormsTab', {
+                toolbar: this.toolbar.toolbar,
+                config: config.config,
+                api: this.api
+            });
+            var me = this;
+            this.addListeners({
+                'FormsTab': {
+                    'forms:insert': this.onControlsSelect,
+                    'forms:clear': this.onClearClick,
+                    'forms:submit': this.onSubmitClick,
+                    'forms:save': this.onSaveFormClick,
+                },
+                'Toolbar': {
+                    'tab:active': this.onActiveTab,
+                    'tab:collapse': this.onTabCollapse,
+                    'view:compact'  : function (toolbar, state) {
+                        state && me.onTabCollapse();
+                    },
+                }
+            });
+        },
+
+        SetDisabled: function(state) {
+            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);
+        },
+
+        onCoAuthoringDisconnect: function() {
+            this.SetDisabled(true);
+        },
+
+        onApiFocusObject: function(selectedObjects) {
+            if (!this.toolbar.editMode) return;
+
+            var pr, i = -1, type,
+                paragraph_locked = false,
+                shape_pr = undefined;
+
+            while (++i < selectedObjects.length) {
+                type = selectedObjects[i].get_ObjectType();
+                pr   = selectedObjects[i].get_ObjectValue();
+
+                if (type === Asc.c_oAscTypeSelectElement.Paragraph) {
+                    paragraph_locked = pr.get_Locked();
+                } else if (type === Asc.c_oAscTypeSelectElement.Image) {
+                    if (pr && pr.get_ShapeProperties())
+                        shape_pr = pr.get_ShapeProperties();
+                }
+            }
+            var arr = [ this.view.btnTextField, this.view.btnComboBox, this.view.btnDropDown, this.view.btnCheckBox,
+                        this.view.btnRadioBox, this.view.btnImageField, this.view.btnEmailField, this.view.btnPhoneField,
+                        this.view.btnCreditCard, this.view.btnZipCode, this.view.btnDateTime];
+            Common.Utils.lockControls(Common.enumLock.paragraphLock, paragraph_locked,   {array: arr});
+
+            var in_smart_art = shape_pr && shape_pr.asc_getFromSmartArt(),
+                in_smart_art_internal = shape_pr && shape_pr.asc_getFromSmartArtInternal();
+            Common.Utils.lockControls(Common.enumLock.inSmartart, in_smart_art, {array: arr});
+            Common.Utils.lockControls(Common.enumLock.inSmartartInternal, in_smart_art_internal, {array: arr});
+        },
+
+        onControlsSelect: function(type, options) {
+            if (!(this.toolbar.mode && this.toolbar.mode.canFeatureForms)) return;
+
+            var oPr,
+                oFormPr = new AscCommon.CSdtFormPr();
+            this.toolbar.toolbar.fireEvent('insertcontrol', this.toolbar.toolbar);
+            if (type == 'picture')
+                this.api.AddImageField();
+            else if (type == 'checkbox')
+                this.api.AddCheckboxField();
+            else if (type == 'radiobox')
+                this.api.AddRadiobuttonField();
+            else if (type == 'combobox')
+                this.api.AddComboboxField();
+            else if (type == 'dropdown')
+                this.api.AddListboxField();
+            else if (type == 'datetime'){
+                this.api.AddDateField();
+            } else if (type == 'text') {
+                this.api.AddTextField();
+                // var props = new AscCommon.CContentControlPr();
+                // oPr = new AscCommon.CSdtTextFormPr();
+                // if (options) {
+                //     if (options.reg)
+                //         oPr.put_RegExpFormat(options.reg);
+                //     else if (options.mask)
+                //         oPr.put_MaskFormat(options.mask);
+                //     if (options.placeholder)
+                //         props.put_PlaceholderText(options.placeholder);
+                //     if (options.fixed!==undefined)
+                //         oFormPr.put_Fixed && oFormPr.put_Fixed(options.fixed);
+                // }
+                // props.put_TextFormPr(oPr);
+                // props.put_FormPr(oFormPr);
+                // this.api.asc_AddContentControlTextForm(props);
+            }
+            // else if (type === 'signature')
+            //     this.api.asc_AddContentControlSignature(oFormPr);
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onClearClick: function() {
+            if (this.api) {
+                this.api.asc_ClearAllSpecialForms();
+            }
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onSubmitClick: function() {
+            if (!this.api.asc_IsAllRequiredFormsFilled()) {
+                this.api.asc_MoveToFillingForm(true, true, true);
+                Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+                return;
+            }
+
+            this.api.asc_SendForm();
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onSaveFormClick: function() {
+            var me = this,
+                callback = function() {
+                    if (me.appConfig.isOffline)
+                        me.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.PDF));
+                    else {
+                        me.isFromFormSaveAs = me.appConfig.canRequestSaveAs || !!me.appConfig.saveAsUrl;
+                        var options = new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.PDF, me.isFromFormSaveAs);
+                        options.asc_setIsSaveAs(me.isFromFormSaveAs);
+                        me.api.asc_DownloadAs(options);
+                    }
+                };
+        },
+
+        onDownloadUrl: function(url, fileType) {
+            if (this.isFromFormSaveAs) {
+                var me = this,
+                    defFileName = this.getApplication().getController('Viewport').getView('Common.Views.Header').getDocumentCaption();
+                !defFileName && (defFileName = me.view.txtUntitled);
+
+                var idx = defFileName.lastIndexOf('.');
+                if (idx>0)
+                    defFileName = defFileName.substring(0, idx) + '.pdf';
+
+                if (me.appConfig.canRequestSaveAs) {
+                    Common.Gateway.requestSaveAs(url, defFileName, fileType);
+                } else {
+                    me._saveCopyDlg = new Common.Views.SaveAsDlg({
+                        saveFolderUrl: me.appConfig.saveAsUrl,
+                        saveFileUrl: url,
+                        defFileName: defFileName
+                    });
+                    me._saveCopyDlg.on('saveaserror', function(obj, err){
+                        Common.UI.warning({
+                            closable: false,
+                            msg: err,
+                            callback: function(btn){
+                                Common.NotificationCenter.trigger('edit:complete', me);
+                            }
+                        });
+                    }).on('close', function(obj){
+                        me._saveCopyDlg = undefined;
+                    });
+                    me._saveCopyDlg.show();
+                }
+            }
+            this.isFromFormSaveAs = false;
+        },
+
+        onLongActionBegin: function(type, id) {
+            if (id==Asc.c_oAscAsyncAction['Submit'] && this.view.btnSubmit) {
+                this._submitFail = false;
+                this.submitedTooltip && this.submitedTooltip.hide();
+                Common.Utils.lockControls(Common.enumLock.submit, true, {array: [this.view.btnSubmit]})
+            }
+        },
+
+        onLongActionEnd: function(type, id) {
+            if (id==Asc.c_oAscAsyncAction['Submit'] && this.view.btnSubmit) {
+                Common.Utils.lockControls(Common.enumLock.submit, !this._submitFail, {array: [this.view.btnSubmit]});
+                if (!this._submitFail) {
+                    Common.Gateway.submitForm();
+                    this.view.btnSubmit.setCaption(this.view.textFilled);
+                    var text = (typeof this.appConfig.customization.submitForm==='object') ? this.appConfig.customization.submitForm.resultMessage : this.view.textSubmitOk;
+                    if (text==='') return;
+                    if (!this.submitedTooltip) {
+                        this.submitedTooltip = new Common.UI.SynchronizeTip({
+                            text: text || this.view.textSubmitOk,
+                            extCls: 'no-arrow colored',
+                            showLink: false,
+                            target: $('.toolbar'),
+                            placement: 'bottom'
+                        });
+                        this.submitedTooltip.on('closeclick', function () {
+                            this.submitedTooltip.hide();
+                        }, this);
+                    }
+                    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(){
+            });
+        },
+
+        onActiveTab: function(tab) {
+            (tab !== 'forms') && this.onTabCollapse();
+        },
+
+        onTabCollapse: function(tab) {
+        },
+
+        onRightMenuClick: function(menu, type, minimized, event) {
+        }
+
+    }, PDFE.Controllers.FormsTab || {}));
+});

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

@@ -404,6 +404,7 @@ define([
                 this.appOptions.mentionShare = !((typeof (this.appOptions.customization) == 'object') && (this.appOptions.customization.mentionShare==false));
                 this.appOptions.canSaveDocumentToBinary = this.editorConfig.canSaveDocumentToBinary;
                 this.appOptions.user.guest && this.appOptions.canRenameAnonymous && Common.NotificationCenter.on('user:rename', _.bind(this.showRenameUserDialog, this));
+                this.appOptions.canFeatureForms = true;
 
                 this.appOptions.canRequestClose = this.editorConfig.canRequestClose;
                 this.appOptions.canCloseEditor = false;

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

@@ -1423,6 +1423,19 @@ define([
                     me.toolbar.addTab(tab, $panel, 1);
                     me.toolbar.setVisible('ins', true);
                 }
+
+                if (config.canFeatureForms) {
+                    tab = {caption: me.textTabForms, action: 'forms', layoutname: 'toolbar-forms', dataHintTitle: 'M'};
+                    var forms = me.getApplication().getController('FormsTab');
+                    forms.setApi(me.api).setConfig({toolbar: me, config: config});
+                    $panel = forms.createToolbarPanel();
+                    if ($panel) {
+                        me.toolbar.addTab(tab, $panel, 2);
+                        me.toolbar.setVisible('forms', true);
+                        me.api.SetEditFieldsMode(true);
+                        Array.prototype.push.apply(me.toolbar.lockControls, forms.getView('FormsTab').getButtons());
+                    }
+                }
             }
         },
 
@@ -1454,11 +1467,23 @@ define([
                     instab.onDocumentReady();
                 }, 50);
 
+                if (this.mode.canFeatureForms) {
+                    tab = {caption: me.textTabForms, action: 'forms', layoutname: 'toolbar-forms', dataHintTitle: 'M'};
+                    var forms = this.getApplication().getController('FormsTab');
+                    forms.setApi(me.api).setConfig({toolbar: me, config: this.mode});
+                    toolbar.addTab(tab, forms.createToolbarPanel(), 2);
+                    Array.prototype.push.apply(me.toolbar.lockControls, forms.getView('FormsTab').getButtons());
+                    forms.onAppReady(this.mode);
+                    forms.getView('FormsTab').onAppReady(this.mode);
+                }
+
                 this._state.initEditing = false;
             }
-            if (this.mode.isPDFEdit || toolbar.isTabActive('ins'))
+            this.api.SetEditFieldsMode(this.mode.isPDFEdit && this.mode.canFeatureForms);
+            if (this.mode.isPDFEdit || toolbar.isTabActive('ins') || toolbar.isTabActive('forms'))
                 toolbar.setTab('home');
             toolbar.setVisible('ins', this.mode.isPDFEdit);
+            toolbar.setVisible('forms', this.mode.isPDFEdit && this.mode.canFeatureForms);
             $host.find('.annotate').toggleClass('hidden', this.mode.isPDFEdit);
             $host.find('.pdfedit').toggleClass('hidden', !this.mode.isPDFEdit);
         },

apps/pdfeditor/main/app/template/FormSettings.template

@@ -0,0 +1,298 @@
+<table cols="1" role="presentation">
+    <tr>
+        <td>
+            <label class="header padding-small" id="form-settings-name"><%= scope.textField %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textFillRoles %></label>
+            <div id="form-combo-roles" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-keyfield">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textKey %></label>
+            <div id="form-combo-key" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr class="form-connected">
+        <td class="padding-small">
+            <label style="opacity: 0.5;" class="margin-right-5" id="form-settings-connected"><%= scope.textConnected %></label>
+            <label class="link-solid" id="form-settings-disconnect"><%= scope.textDisconnect %></label>
+        </td>
+    </tr>
+    <tr class="form-radiobox">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textGroupKey %></label>
+            <div id="form-combo-group-key" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr class="form-placeholder">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textPlaceholder %></label>
+            <div id="form-txt-pholder"></div>
+        </td>
+    </tr>
+    <tr class="form-not-in-complex">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textTag %></label>
+            <div id="form-txt-tag"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textTip %></label>
+            <div id="form-txt-help"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textDefValue %></label>
+            <div id="form-combo-def-value" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textDefValue %></label>
+            <div id="form-txt-def-value"></div>
+        </td>
+    </tr>
+    <tr class="form-datetime">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textDefValue %></label>
+            <div id="form-date-def-value"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textFormat %></label>
+            <div id="form-combo-format" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield-mask">
+        <td class="padding-small">
+            <div id="form-txt-mask" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield-regexp">
+        <td class="padding-small">
+            <div id="form-txt-regexp"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textFormatSymbols %></label>
+            <div id="form-txt-format-symbols"></div>
+        </td>
+    </tr>
+    <tr class="form-radiobox">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textRadioChoice %></label>
+            <div id="form-txt-choice"></div>
+        </td>
+    </tr>
+</table>
+<table cols="2" role="presentation">
+    <tr class="form-list">
+        <td colspan="2" class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-list">
+        <td colspan="2" class="padding-small">
+            <label class="input-label"><%= scope.textValue %></label>
+        </td>
+    </tr>
+    <tr class="form-list" style="vertical-align: top;">
+        <td class="padding-small">
+            <div id="form-txt-new-value" style="width:164px;" class="margin-right-5"></div>
+        </td>
+        <td class="padding-small">
+            <div id="form-list-add" class="margin-left-5"></div>
+        </td>
+    </tr>
+    <tr class="form-list" style="vertical-align: top;">
+        <td class="padding-large">
+            <div id="form-list-list" style="width:164px; height: 95px;" class="margin-right-5"></div>
+        </td>
+        <td class="padding-large">
+            <div id="form-list-delete" style="margin-bottom: 5px;" class="margin-left-5"></div>
+            <div id="form-list-up" style="margin-bottom: 5px;" class="margin-left-5"></div>
+            <div id="form-list-down" class="margin-left-5"></div>
+        </td>
+    </tr>
+</table>
+<table cols="1" role="presentation">
+    <tr class="form-datetime">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-datetime">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textDateFormat %></label>
+            <div id="form-cmb-date-format" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr class="form-datetime">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textLang %></label>
+            <div id="form-cmb-date-lang" style="width: 100%;"></div>
+        </td>
+    </tr>
+</table>
+<table cols="1" role="presentation">
+    <tr class="form-checkbox">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-checkbox">
+        <td class="padding-small">
+            <div id="form-chb-def-value"></div>
+        </td>
+    </tr>
+    <tr class="form-fixed">
+        <td class="padding-small">
+            <div id="form-chb-fixed"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield-simple">
+        <td class="padding-small">
+            <div id="form-chb-autofit"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield-simple">
+        <td class="padding-small">
+            <div id="form-chb-multiline"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield-simple">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield">
+        <td class="padding-small">
+            <div id="form-chb-max-chars" style="display: inline-block;margin-top: 4px;"></div>
+            <div id="form-spin-max-chars" style="display: inline-block;" class="float-right"></div>
+        </td>
+    </tr>
+    <tr class="form-textfield">
+        <td class="padding-small">
+            <div id="form-chb-comb"></div>
+        </td>
+    </tr>
+</table>
+<table cols="2" role="presentation">
+    <tr class="form-textfield">
+        <td colspan=2 class="padding-left-22">
+            <label class="input-label"><%= scope.textWidth %></label>
+        </td>
+    </tr>
+    <tr class="form-textfield">
+        <td class="padding-small padding-left-22">
+            <div id="form-combo-width-rule" style="width: 82px;"></div>
+        </td>
+        <td class="padding-small">
+            <div id="form-spin-width" class="float-right"></div>
+        </td>
+    </tr>
+</table>
+<table cols="1" role="presentation">
+    <tr class="form-image">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-image">
+        <td class="padding-small">
+            <label class="input-label"><%= scope.textScale %></label>
+            <div id="form-combo-scale" style="width: 100%;"></div>
+        </td>
+    </tr>
+    <tr class="form-image">
+        <td class="padding-large">
+            <div id="form-chb-aspect"></div>
+        </td>
+    </tr>
+    <tr class="form-image">
+        <td class="padding-large">
+            <div id="form-cnt-position" style="width: 100%;">
+                <div class="row">
+                    <div id="form-img-position-preview">
+                        <div id="form-img-example"><%= scope.textImage %></div>
+                    </div>
+                    <div id="form-img-slider-position-y"></div>
+                </div>
+                <div class="row">
+                    <div id="form-img-slider-position-x"></div>
+                    <label id="form-img-slider-value"></label>
+                </div>
+            </div>
+        </td>
+    </tr>
+    <tr class="form-image">
+        <td class="padding-large">
+            <div id="form-button-replace" style="width:100%;"></div>
+        </td>
+    </tr>
+</table>
+<table cols="1" role="presentation">
+    <tr>
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label" style="margin-top: 4px;"><%= scope.textColor %></label>
+            <div id="form-color-btn" style="display: inline-block;" class="float-right"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <label class="input-label" style="margin-top: 4px;"><%= scope.textBackgroundColor %></label>
+            <div id="form-background-color-btn" style="display: inline-block;" class="float-right"></div>
+        </td>
+    </tr>
+</table>
+<table cols="1" role="presentation">
+    <tr>
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="form-not-in-complex">
+        <td class="padding-small">
+            <div id="form-chb-required"></div>
+        </td>
+    </tr>
+    <tr class="form-not-in-complex">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small">
+            <div id="form-btn-delete"></div>
+        </td>
+    </tr>
+    <tr class="form-not-in-complex">
+        <td class="padding-small">
+            <div id="form-btn-lock"></div>
+        </td>
+    </tr>
+    <tr class="finish-cell"></tr>
+</table>

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

@@ -0,0 +1,493 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2024
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  FormsTab.js
+ *
+ *  Created on 04.03.2025
+ *
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/Layout'
+], function () {
+    'use strict';
+
+    if (!Common.enumLock)
+        Common.enumLock = {};
+
+    var enumLock = {
+        requiredNotFilled: 'required-not-filled',
+        submit: 'submit'
+    };
+    for (var key in enumLock) {
+        if (enumLock.hasOwnProperty(key)) {
+            Common.enumLock[key] = enumLock[key];
+        }
+    }
+
+    PDFE.Views.FormsTab = Common.UI.BaseView.extend(_.extend((function(){
+        var template =
+        '<section class="panel" data-tab="forms" role="tabpanel" aria-labelledby="forms">' +
+            '<div class="group forms-buttons" 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>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-signature"></span>' +
+            '</div>' +
+            '<div class="separator long forms-buttons" style="display: none;"></div>' +
+            '<div class="group forms-buttons" style="display: none;">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-email"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-phone"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-datetime"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-zipcode"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-credit"></span>' +
+            '</div>' +
+            '<div class="separator long fill-buttons" style="display: none;"></div>' +
+            '<div class="group no-group-mask" style="display: none;">' +
+                '<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>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-clear"></span>' +
+            '</div>' +
+            '<div class="separator long save-separator" style="display: none;"></div>' +
+            '<div class="group no-group-mask" style="">' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-submit"></span>' +
+                '<span class="btn-slot text x-huge" id="slot-btn-form-save"></span>' +
+            '</div>' +
+        '</section>';
+
+        function setEvents() {
+            var me = this;
+            this.btnTextField && this.btnTextField.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['text']);
+            });
+            this.btnComboBox && this.btnComboBox.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['combobox']);
+            });
+            this.btnDropDown && this.btnDropDown.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['dropdown']);
+            });
+            this.btnCheckBox && this.btnCheckBox.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['checkbox']);
+            });
+            this.btnRadioBox && this.btnRadioBox.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['radiobox']);
+            });
+            this.btnImageField && this.btnImageField.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['picture']);
+            });
+            this.btnSignField && this.btnSignField.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['signature']);
+            });
+            this.btnEmailField && this.btnEmailField.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['text', {reg: "\\S+@\\S+\\.\\S+", placeholder: 'user_name@email.com'}]);
+            });
+            this.btnPhoneField && this.btnPhoneField.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['text', {mask: "(999)999-9999", placeholder: '(999)999-9999'}]);
+            });
+            this.btnCreditCard && this.btnCreditCard.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['text', {mask: "9999-9999-9999-9999", placeholder: '9999-9999-9999-9999'}]);
+            });
+            this.btnZipCode && this.btnZipCode.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['text', {mask: "99999-9999", placeholder: '99999-9999'}]);
+            });
+            this.btnDateTime && this.btnDateTime.on('click', function (b, e) {
+                me.fireEvent('forms:insert', ['datetime']);
+            });
+            this.btnClear && this.btnClear.on('click', function (b, e) {
+                me.fireEvent('forms:clear');
+            });
+            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');
+            });
+            this.btnSaveForm && this.btnSaveForm.on('click', function (b, e) {
+                me.fireEvent('forms:save');
+            });
+        }
+
+        return {
+
+            options: {},
+
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this);
+                this.toolbar = options.toolbar;
+                this.appConfig = options.config;
+                this.api = options.api;
+
+                this.paragraphControls = [];
+                this._state = {};
+
+                var me = this;
+                var _set = Common.enumLock;
+
+                this.btnTextField = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-text-field',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capBtnText,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnTextField);
+
+                this.btnComboBox = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-combo-box',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capBtnComboBox,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnComboBox);
+
+                this.btnDropDown = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-dropdown',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capBtnDropDown,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnDropDown);
+
+                this.btnCheckBox = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-checkbox',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capBtnCheckBox,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnCheckBox);
+
+                this.btnRadioBox = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-radio-button',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capBtnRadioBox,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnRadioBox);
+
+                this.btnImageField = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-insertimage',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capBtnImage,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnImageField);
+
+                this.btnSignField = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-signature-field',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capBtnSignature,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnSignField);
+
+                this.btnEmailField = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-email',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capBtnEmail,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnEmailField);
+
+                this.btnPhoneField = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-phone',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capBtnPhone,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnPhoneField);
+
+                this.btnZipCode = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-zip-code',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capZipCode,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnZipCode);
+
+                this.btnCreditCard = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-credit-card',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capCreditCard,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnCreditCard);
+
+                this.btnDateTime = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-datetime',
+                    lock: [_set.paragraphLock, _set.lostConnect, _set.disableOnStart, _set.inSmartart, _set.inSmartartInternal, _set.viewMode],
+                    caption: this.capDateTime,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnDateTime);
+
+                this.btnClear = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-clear-style',
+                    caption: this.textClear,
+                    lock: [ _set.lostConnect, _set.viewMode, _set.disableOnStart],
+                    visible: false,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnClear);
+
+                this.btnPrevForm = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-previous-field',
+                    lock: [_set.lostConnect, _set.disableOnStart, _set.viewMode],
+                    caption: this.capBtnPrev,
+                    visible: false,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnPrevForm);
+
+                this.btnNextForm = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon btn-next-field',
+                    lock: [_set.lostConnect, _set.disableOnStart, _set.viewMode],
+                    caption: this.capBtnNext,
+                    visible: false,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.paragraphControls.push(this.btnNextForm);
+
+                if (this.appConfig.canSubmitForms && false) {
+                    this.btnSubmit = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        iconCls: 'toolbar__icon btn-submit-form',
+                        lock: [_set.lostConnect, _set.disableOnStart, _set.requiredNotFilled, _set.submit],
+                        caption: this.capBtnSubmit,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
+                    });
+                    this.paragraphControls.push(this.btnSubmit);
+                } else if (this.appConfig.canDownloadForms && false) {
+                    this.btnSaveForm = new Common.UI.Button({
+                        cls: 'btn-toolbar x-huge icon-top',
+                        lock: [_set.lostConnect, _set.disableOnStart],
+                        iconCls: 'toolbar__icon btn-save-form',
+                        caption: this.appConfig.canRequestSaveAs || !!this.appConfig.saveAsUrl ? this.capBtnSaveForm : (this.appConfig.isOffline ? this.capBtnSaveFormDesktop : this.capBtnDownloadForm),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
+                    });
+                    this.paragraphControls.push(this.btnSaveForm);
+                }
+                Common.UI.LayoutManager.addControls(this.paragraphControls);
+                Common.Utils.lockControls(Common.enumLock.disableOnStart, true, {array: this.paragraphControls});
+                this._state = {disabled: false};
+                Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+            },
+
+            render: function (el) {
+                if ( el ) el.html( this.getPanel() );
+
+                return this;
+            },
+
+            onAppReady: function (config) {
+                var me = this;
+                (new Promise(function (accept, reject) {
+                    accept();
+                })).then(function(){
+                    if (config.isEdit && config.isPDFEdit && config.canFeatureForms) {
+                        me.btnTextField.updateHint(me.tipTextField);
+                        me.btnComboBox.updateHint(me.tipComboBox);
+                        me.btnDropDown.updateHint(me.tipDropDown);
+                        me.btnCheckBox.updateHint(me.tipCheckBox);
+                        me.btnRadioBox.updateHint(me.tipRadioBox);
+                        me.btnImageField.updateHint(me.tipImageField);
+                        me.btnSignField.updateHint(me.tipSignField);
+                        me.btnEmailField.updateHint(me.tipEmailField);
+                        me.btnPhoneField.updateHint(me.tipPhoneField);
+                        me.btnZipCode.updateHint(me.tipZipCode);
+                        me.btnCreditCard.updateHint(me.tipCreditCard);
+                        me.btnDateTime.updateHint(me.tipDateTime);
+                    }
+                    me.btnClear.updateHint(me.textClearFields);
+                    me.btnPrevForm.updateHint(me.tipPrevForm);
+                    me.btnNextForm.updateHint(me.tipNextForm);
+                    me.btnSubmit && me.btnSubmit.updateHint(me.tipSubmit);
+                    me.btnSaveForm && me.btnSaveForm.updateHint(config.canRequestSaveAs || !!config.saveAsUrl ? me.tipSaveForm : me.tipDownloadForm);
+
+                    setEvents.call(me);
+                });
+            },
+
+            getPanel: function () {
+                this.$el = $(_.template(template)( {} ));
+                var $host = this.$el;
+
+                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.btnSignField.render($host.find('#slot-btn-form-signature'));
+                this.btnEmailField.render($host.find('#slot-btn-form-email'));
+                this.btnPhoneField.render($host.find('#slot-btn-form-phone'));
+                this.btnZipCode.render($host.find('#slot-btn-form-zipcode'));
+                this.btnCreditCard.render($host.find('#slot-btn-form-credit'));
+                this.btnDateTime.render($host.find('#slot-btn-form-datetime'));
+                this.btnSubmit && this.btnSubmit.render($host.find('#slot-btn-form-submit'));
+                $host.find('.forms-buttons').show();
+                this.btnClear.render($host.find('#slot-btn-form-clear'));
+                this.btnPrevForm.render($host.find('#slot-btn-form-prev'));
+                this.btnNextForm.render($host.find('#slot-btn-form-next'));
+
+                this.btnSaveForm && this.btnSaveForm.render($host.find('#slot-btn-form-save'));
+                (this.btnSubmit || this.btnSaveForm) && $host.find('.save-separator').show();
+
+                return this.$el;
+            },
+
+            show: function () {
+                Common.UI.BaseView.prototype.show.call(this);
+                this.fireEvent('show', this);
+            },
+
+            getButtons: function() {
+                return this.paragraphControls;
+            },
+
+            setPreviewMode: function(state) {
+                this.btnClear.setVisible(state);
+                this.btnPrevForm.setVisible(state);
+                this.btnNextForm.setVisible(state);
+                this.btnSubmit && this.btnSubmit.setVisible(!state);
+                this.btnSaveForm && this.btnSaveForm.setVisible(!state);
+            },
+
+            SetDisabled: function (state) {
+                this._state.disabled = state;
+                this.paragraphControls.forEach(function(button) {
+                    if ( button ) {
+                        button.setDisabled(state);
+                    }
+                }, this);
+            },
+
+            capBtnText: 'Text Field',
+            capBtnComboBox: 'Combo Box',
+            capBtnDropDown: 'Dropdown',
+            capBtnCheckBox: 'Checkbox',
+            capBtnRadioBox: 'Radio Button',
+            capBtnImage: 'Image',
+            textClearFields: 'Clear All Fields',
+            tipTextField: 'Insert text field',
+            tipComboBox: 'Insert combo box',
+            tipDropDown: 'Insert dropdown list',
+            tipCheckBox: 'Insert checkbox',
+            tipRadioBox: 'Insert radio button',
+            tipImageField: 'Insert image',
+            textClear: 'Clear Fields',
+            capBtnPrev: 'Previous Field',
+            capBtnNext: 'Next Field',
+            capBtnSubmit: 'Submit',
+            tipSubmit: 'Submit form',
+            textSubmited: 'Form submitted successfully',
+            textRequired: 'Fill all required fields to send form.',
+            capBtnSaveForm: 'Save as pdf',
+            tipSaveForm: 'Save a file as a fillable PDF',
+            txtUntitled: 'Untitled',
+            textGotIt: 'Got it',
+            capBtnDownloadForm: 'Download as pdf',
+            tipDownloadForm: 'Download a file as a fillable PDF',
+            capBtnEmail: 'Email Address',
+            capBtnPhone: 'Phone Number',
+            tipEmailField: 'Insert email address',
+            tipPhoneField: 'Insert phone number',
+            capZipCode: 'Zip Code',
+            capCreditCard: 'Credit Card',
+            tipZipCode: 'Insert zip code',
+            tipCreditCard: 'Insert credit card number',
+            capDateTime: 'Date & Time',
+            tipDateTime: 'Insert date and time',
+            capBtnSaveFormDesktop: 'Save as...',
+            textSubmitOk: 'Your PDF form has been saved in the Complete section. You can fill out this form again and send another result.',
+            textFilled: 'Filled',
+            capBtnSignature: 'Signature Field',
+            tipSignField: 'Insert signature field'
+        }
+    }()), PDFE.Views.FormsTab || {}));
+});

apps/pdfeditor/main/app_dev.js

@@ -135,6 +135,7 @@ require([
             'InsTab',
             'Search',
             'Print',
+            'FormsTab',
             'Common.Controllers.Fonts'
             ,'Common.Controllers.Chat'
             ,'Common.Controllers.Comments'
@@ -169,6 +170,7 @@ require([
                 'pdfeditor/main/app/controller/InsTab',
                 'pdfeditor/main/app/controller/Search',
                 'pdfeditor/main/app/controller/Print',
+                'pdfeditor/main/app/controller/FormsTab',
                 'common/main/lib/util/utils',
                 'common/main/lib/controller/Fonts',
                 'common/main/lib/controller/Comments'
@@ -205,6 +207,7 @@ require([
                     'pdfeditor/main/app/controller/DocumentHolderExt',
                     'pdfeditor/main/app/view/FileMenuPanels',
                     'pdfeditor/main/app/view/DocumentHolderExt',
+                    'pdfeditor/main/app/view/FormsTab',
                     'pdfeditor/main/app/view/ParagraphSettingsAdvanced',
                     'pdfeditor/main/app/view/ImageSettingsAdvanced',
                     'pdfeditor/main/app/view/HyperlinkSettingsDialog',

apps/pdfeditor/main/app_pack.js

@@ -24,6 +24,8 @@ require([
     'pdfeditor/main/app/controller/DocumentHolderExt',
     'pdfeditor/main/app/view/FileMenuPanels',
     'pdfeditor/main/app/view/DocumentHolderExt',
+    'pdfeditor/main/app/view/FormsTab',
+    'pdfeditor/main/app/view/FormSettings',
     'pdfeditor/main/app/view/ParagraphSettingsAdvanced',
     'pdfeditor/main/app/view/ImageSettingsAdvanced',
     'pdfeditor/main/app/view/HyperlinkSettingsDialog',

apps/pdfeditor/main/locale/en.json

@@ -1057,6 +1057,7 @@
   "PDFE.Controllers.Viewport.textFitPage": "Fit to Page",
   "PDFE.Controllers.Viewport.textFitWidth": "Fit to Width",
   "PDFE.Controllers.Viewport.txtDarkMode": "Dark mode",
+  "PDFE.Controllers.Toolbar.textTabForms": "Forms",
   "PDFE.Views.DocumentHolder.aboveText": "Above",
   "PDFE.Views.DocumentHolder.addCommentText": "Add Comment",
   "PDFE.Views.DocumentHolder.advancedChartText": "Chart advanced settings",
@@ -1370,6 +1371,51 @@
   "PDFE.Views.FileMenuPanels.Settings.txtWorkspace": "Workspace",
   "PDFE.Views.FileMenuPanels.ViewSaveAs.textDownloadAs": "Download as",
   "PDFE.Views.FileMenuPanels.ViewSaveCopy.textSaveCopyAs": "Save Copy as",
+  "PDFE.Views.FormsTab.capBtnCheckBox": "Checkbox",
+  "PDFE.Views.FormsTab.capBtnComboBox": "Combo Box",
+  "PDFE.Views.FormsTab.capBtnDownloadForm": "Download As PDF",
+  "PDFE.Views.FormsTab.capBtnDropDown": "Dropdown",
+  "PDFE.Views.FormsTab.capBtnEmail": "Email Address",
+  "PDFE.Views.FormsTab.capBtnImage": "Image",
+  "PDFE.Views.FormsTab.capBtnNext": "Next Field",
+  "PDFE.Views.FormsTab.capBtnPhone": "Phone Number",
+  "PDFE.Views.FormsTab.capBtnPrev": "Previous Field",
+  "PDFE.Views.FormsTab.capBtnRadioBox": "Radio Button",
+  "PDFE.Views.FormsTab.capBtnSaveForm": "Save As PDF",
+  "PDFE.Views.FormsTab.capBtnSaveFormDesktop": "Save As...",
+  "PDFE.Views.FormsTab.capBtnSignature": "Signature Field",
+  "PDFE.Views.FormsTab.capBtnSubmit": "Complete & Submit",
+  "PDFE.Views.FormsTab.capBtnText": "Text Field",
+  "PDFE.Views.FormsTab.capCreditCard": "Credit Card",
+  "PDFE.Views.FormsTab.capDateTime": "Date & Time",
+  "PDFE.Views.FormsTab.capZipCode": "ZIP Code",
+  "PDFE.Views.FormsTab.textAnyone": "Anyone",
+  "PDFE.Views.FormsTab.textClear": "Clear Fields",
+  "PDFE.Views.FormsTab.textClearFields": "Clear All Fields",
+  "PDFE.Views.FormsTab.textFilled": "Filled",
+  "PDFE.Views.FormsTab.textGotIt": "Got it",
+  "PDFE.Views.FormsTab.textRequired": "To submit the form, you must fill in all required fields",
+  "PDFE.Views.FormsTab.textSubmited": "Form submitted successfully",
+  "PDFE.Views.FormsTab.textSubmitOk": "Your PDF form has been saved in the Complete section.",
+  "PDFE.Views.FormsTab.tipCheckBox": "Insert checkbox",
+  "PDFE.Views.FormsTab.tipComboBox": "Insert combo box",
+  "PDFE.Views.FormsTab.tipCreditCard": "Insert credit card number",
+  "PDFE.Views.FormsTab.tipDateTime": "Insert date and time",
+  "PDFE.Views.FormsTab.tipDownloadForm": "Download a file as a fillable PDF",
+  "PDFE.Views.FormsTab.tipDropDown": "Insert dropdown list",
+  "PDFE.Views.FormsTab.tipEmailField": "Insert email address",
+  "PDFE.Views.FormsTab.tipImageField": "Insert image",
+  "PDFE.Views.FormsTab.tipNextForm": "Go to the next field",
+  "PDFE.Views.FormsTab.tipPhoneField": "Insert phone number",
+  "PDFE.Views.FormsTab.tipPrevForm": "Go to the previous field",
+  "PDFE.Views.FormsTab.tipRadioBox": "Insert radio button",
+  "PDFE.Views.FormsTab.tipSaveFile": "Click \"Save As PDF\" to save the form in the format ready for filling.",
+  "PDFE.Views.FormsTab.tipSaveForm": "Save a file as a fillable PDF",
+  "PDFE.Views.FormsTab.tipSignField": "Insert signature field",
+  "PDFE.Views.FormsTab.tipSubmit": "Submit form",
+  "PDFE.Views.FormsTab.tipTextField": "Insert text field",
+  "PDFE.Views.FormsTab.tipZipCode": "Insert ZIP code",
+  "PDFE.Views.FormsTab.txtUntitled": "Untitled",
   "PDFE.Views.HyperlinkSettingsDialog.strDisplay": "Display",
   "PDFE.Views.HyperlinkSettingsDialog.strLinkTo": "Link to",
   "PDFE.Views.HyperlinkSettingsDialog.textDefault": "Selected text fragment",

apps/pdfeditor/main/resources/img/toolbar/2.5x/big/btn-checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5H23V23H5V5ZM4 4H5H23H24V5V23V24H23H5H4V23V5V4ZM12.3536 19.3536L21.3536 10.3536L20.6464 9.64645L12 18.2929L8.35355 14.6464L7.64645 15.3536L11.6464 19.3536L12 19.7071L12.3536 19.3536Z" fill="black"/>
+</svg>

apps/pdfeditor/main/resources/img/toolbar/2.5x/big/btn-combo-box.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 6H17V12H5V6ZM5 5H17H18H24H25V6V12V13H24H18V23V24H17H5H4V23V13V12V6V5H5ZM5 13H17V23H5V13ZM24 6V12H18V6H24ZM14 16H8V17H14V16ZM8 19H14V20H8V19ZM19.1464 8.35355L20.6464 9.85355L21 10.2071L21.3536 9.85355L22.8536 8.35355L22.1464 7.64645L21 8.79289L19.8536 7.64645L19.1464 8.35355Z" fill="black"/>
+</svg>

apps/pdfeditor/main/resources/img/toolbar/2.5x/big/btn-credit-card.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 22V11H3V22H25ZM25 6V9H3V6H14H25ZM3 5H2V6V22V23H3H25H26V22V6V5H25H14H3ZM20 15H23V13H20V15Z" fill="black"/>
+</svg>

apps/pdfeditor/main/resources/img/toolbar/2.5x/big/btn-dropdown.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 6H5V12H23V6ZM4 6V12V13V23V24H5H23H24V23V13V12V6V5H23H5H4V6ZM5 13H23V23H5V13ZM20 16H8V17H20V16ZM8 19H20V20H8V19ZM18.1464 8.35355L19.6464 9.85355L20 10.2071L20.3536 9.85355L21.8536 8.35355L21.1464 7.64645L20 8.79289L18.8536 7.64645L18.1464 8.35355Z" fill="black"/>
+</svg>

apps/pdfeditor/main/resources/img/toolbar/2.5x/big/btn-email.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 12.8175C24 14.661 23.6182 16.1407 22.8546 17.2565C22.0994 18.3723 21.0715 18.9303 19.7709 18.9303C19.0241 18.9303 18.4158 18.7119 17.9459 18.2753C17.4844 17.8387 17.2159 17.2444 17.1403 16.4924H17.09C16.7292 17.301 16.2089 17.9115 15.5293 18.3238C14.8496 18.7281 14.0566 18.9303 13.1504 18.9303C11.9085 18.9303 10.9478 18.5421 10.2681 17.7659C9.58842 16.9816 9.24858 15.886 9.24858 14.4791C9.24858 12.8458 9.75205 11.5116 10.759 10.4767C11.7743 9.4336 13.0959 8.91207 14.7237 8.91207C15.8817 8.91207 17.0816 9.07782 18.3235 9.40934L18.0466 15.037V15.4008C18.0466 16.2418 18.1934 16.8765 18.4871 17.305C18.7808 17.7255 19.2675 17.9357 19.9471 17.9357C20.8114 17.9357 21.5163 17.4667 22.0617 16.5288C22.6155 15.5828 22.8924 14.3537 22.8924 12.8417C22.8924 11.2731 22.5609 9.89852 21.8981 8.71801C21.2352 7.5375 20.287 6.6319 19.0535 6.00121C17.8284 5.36244 16.4271 5.04306 14.8496 5.04306C12.9197 5.04306 11.2163 5.44734 9.73946 6.25591C8.27103 7.0564 7.13824 8.19244 6.34109 9.66404C5.55234 11.1356 5.15796 12.8256 5.15796 14.7338C5.15796 17.3374 5.85861 19.3507 7.25991 20.7738C8.66121 22.1888 10.6499 22.8963 13.2259 22.8963C14.0063 22.8963 14.795 22.8235 15.5922 22.678C16.3977 22.5324 17.3711 22.2494 18.5123 21.829V23.0297C16.8089 23.6766 15.072 24 13.3014 24C10.373 24 8.09062 23.1914 6.45437 21.5743C4.81812 19.9491 4 17.6931 4 14.8065C4 12.7366 4.45312 10.8769 5.35935 9.22741C6.27397 7.56984 7.56199 6.28421 9.22341 5.37053C10.8932 4.45684 12.777 4 14.8748 4C16.6788 4 18.2731 4.35981 19.6576 5.07944C21.0506 5.79907 22.1204 6.83 22.8672 8.17223C23.6224 9.50637 24 11.0548 24 12.8175ZM10.545 14.4548C10.545 15.6111 10.7758 16.4803 11.2373 17.0625C11.6988 17.6446 12.4288 17.9357 13.4273 17.9357C15.567 17.9357 16.7124 16.5369 16.8634 13.7392L17.0648 10.2098C16.4019 9.99151 15.5922 9.88235 14.6356 9.88235C13.3854 9.88235 12.391 10.2988 11.6526 11.1316C10.9142 11.9563 10.545 13.0641 10.545 14.4548Z" fill="black"/>
+</svg>

apps/pdfeditor/main/resources/img/toolbar/2.5x/big/btn-radio-button.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C24 19.5228 19.5228 24 14 24C8.47715 24 4 19.5228 4 14C4 8.47715 8.47715 4 14 4C19.5228 4 24 8.47715 24 14ZM25 14C25 20.0751 20.0751 25 14 25C7.92487 25 3 20.0751 3 14C3 7.92487 7.92487 3 14 3C20.0751 3 25 7.92487 25 14ZM14 18C16.2091 18 18 16.2091 18 14C18 11.7909 16.2091 10 14 10C11.7909 10 10 11.7909 10 14C10 16.2091 11.7909 18 14 18Z" fill="black"/>
+</svg>

apps/pdfeditor/main/resources/img/toolbar/2.5x/big/btn-text-field.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 7H25V21H3V7ZM2 6H3H25H26V7V21V22H25H3H2V21V7V6ZM6 9H5V10H6V18H5V19H6H7H8V18H7V10H8V9H7H6Z" fill="black"/>
+</svg>

apps/pdfeditor/main/resources/img/toolbar/2.5x/big/btn-zip-code.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 5.09846L24 9.64391V23H4V9.64391L14 5.09846ZM25 9L14 4L3 9V23V24H4H24H25V23V9ZM12.0001 13H7.00008V14H10.7747L7 19H7.00008V20H12.0001V19H8.22396L11.9986 14H12.0001V13ZM19 13H17H16V14V16V17V20H17V17H19C20.1046 17 21 16.1046 21 15C21 13.8954 20.1046 13 19 13ZM17 16V14H17.2676H19C19.5523 14 20 14.4477 20 15C20 15.5523 19.5523 16 19 16H17.2676H17ZM13 13H14V20H13V13Z" fill="black"/>
+</svg>