{"id":456,"date":"2018-04-02T10:55:09","date_gmt":"2018-04-02T17:55:09","guid":{"rendered":"https:\/\/support.gwapps.com\/?post_type=ht_kb&p=456"},"modified":"2022-05-31T16:17:18","modified_gmt":"2022-05-31T23:17:18","slug":"form-editor-overview","status":"publish","type":"ht_kb","link":"https:\/\/support.gwapps.com\/es\/knowledge-base\/form-editor-overview\/","title":{"rendered":"Form Editor Overview"},"content":{"rendered":"

The Form Editor is where the designer can create the desired form, with the fields and layout they need. It is also where the workflow and form security are set.<\/p>\n

Form Editor Navigation<\/h2>\n

At the top of the Form Editor, you can navigate between the Design, Workflows, Security and Settings tabs, Preview the form, and Save or Close the form. You can also return to the App Dashboard by clicking on the Panel de control de la aplicaci\u00f3n<\/b> icon, or by clicking on your company\u2019s name at the top left, before the chevron and the application’s name.<\/p>\n\n\n\n\n
Form Editor Navigation<\/b><\/td>\n<\/tr>\n
\"\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The Form Editor tabs are used for the following:<\/p>\n\n\n\n\n\n\n\n\n\n
Tab<\/b><\/td>\nDescripci\u00f3n<\/b><\/td>\n<\/tr>\n
Design<\/td>\nThe Design tab is where the App Designer can edit the design the selected form. Designers can add, remove, edit sections, add components and easily preview those changes. (The Design tab is discussed in this article and others in the in the Forms > Form Editor section.)<\/td>\n<\/tr>\n
Workflow<\/td>\nThe Workflows tab is where the App Designer can create and edit the workflow stages and actions associated with this form. (Workflow is discussed in the Workflow, Automation & Security section, and in detail in the following article: Workflow & Security Overview.<\/a>)<\/td>\n<\/tr>\n
Seguridad<\/td>\nThe Security tab is where the App Designer can set the access rights each role has for records, sections and fields for the defined workflow stages. (Security is discussed in the Workflow, Automation & Security section, and in detail in the following article: Workflow & Security Overview.<\/a>)<\/td>\n<\/tr>\n
Configuraci\u00f3n<\/td>\nThe Settings tab is where the App Designer can define the name and description for the form, along with specify who can create records using this form. (The Settings Tab is discussed in the Forms > Form Editor section, and in detail in the following article: Form Editor: Settings Tab.<\/a>)<\/td>\n<\/tr>\n
Anonymous<\/td>\nThe Anonymous tab has setting related to the Anonymous user feature of GW Apps. (Anonymous Access is discussed in the Workflow, Automation & Security section, and in detail in the following article: Security: Anonymous Access.<\/a>)<\/td>\n<\/tr>\n
SLA<\/td>\nThe SLA tab allows configuring Service Level Agreements (SLAs) for the workflow stages related to this form. (SLAs are discussed in the Workflow, Automation & Security section, and in detail in the following article: Service Level Agreement (SLA).<\/a>)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Navigator Actions<\/h2>\n\n\n\n\n\n\n\n\n\n\n
Icon<\/b><\/td>\nName<\/b><\/td>\nDescripci\u00f3n<\/b><\/td>\n<\/tr>\n
\"\"<\/td>\nLaunch Form<\/td>\nCloses the form editor and opens the application with the form displayed, ready to create a new record.<\/td>\n<\/tr>\n
\"Save<\/td>\nSave<\/td>\nSaves all changes to the form. You will remain in the Form Editor after clicking on this option.<\/td>\n<\/tr>\n
\"Save<\/td>\nSave & Close<\/td>\nSaves all changes to the form. You will remain in the Form Editor after clicking on this option.<\/td>\n<\/tr>\n
\"Close<\/td>\nClose<\/td>\nCloses the form, returning you to the Forms Dashboard.<\/td>\n<\/tr>\n
\"\"<\/td>\nForm Layout & Appearance<\/td>\nOpens the a dialog with display options for the current form.<\/td>\n<\/tr>\n
\"\"<\/td>\nDisable Drag<\/td>\nPrevents elements on the form from being moved around via grag-and-drop.<\/td>\n<\/tr>\n
\"Preview<\/td>\nPreview<\/td>\nOpens the preview dialog with the current form loaded, so that the App Designer can see how it will display to end users.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Design Tab Screen Layout<\/h2>\n

The Design tab of the Form Editor has three areas:<\/p>\n\n\n\n\n\n\n
Name<\/b><\/td>\nLocation<\/b><\/td>\nPurpose<\/b><\/td>\n<\/tr>\n
Palette<\/td>\nLeft Side<\/td>\nThe palette is the list of layout component and fields that can be placed onto the form.<\/p>\n

When the Properties Panel is displayed, the Palette is made narrower and only shows the icons for the\u00a0layout component and fields.<\/td>\n<\/tr>\n

Form Layout Area<\/td>\nMiddle<\/td>\nThis is where the form you are designing is built and displayed. Fields are dragged from the Palette and dropped on the Form Layout Area to created the design of the form.<\/td>\n<\/tr>\n
Properties Panel<\/td>\nRight Side<\/td>\nThis is where all the settings for the fields can be adjusted.<\/p>\n

The Properties Panel only displays when it is activated. When you first open a form only the Palette and Form Layout Area are shown. The Properties Panel displays when the designer clicks on the properties icon for the field or component.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

They look like this:<\/p>\n\n\n\n\n\n\n
Design Tab with Properties Panel Hidden<\/b><\/td>\n<\/tr>\n
\"Form<\/td>\n<\/tr>\n
Design Tab with Properties Panel Shown<\/b><\/td>\n<\/tr>\n
\"Form<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Form Editor Design Basics<\/h2>\n

You create your form by finding the desired field type on the palette on the left side of the screen, then just drag & drop it onto the desired location on the form. You can also drag & drop existing fields within the form to change its layout. There are also components that allow you to choose one, two three or four column layout areas, a bit like putting things in a table in a document so they stay where you want them to.<\/p>\n\n\n\n\n
Drag & Drop Form Design<\/b><\/td>\n<\/tr>\n
\"Form<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

You can then change the settings for the new field by typing them directly on the field or via the properties panel on the right side. (Click on the i icon on the right side of the field to open the Properties Panel.)<\/p>\n\n\n\n\n
Form Editor Properties Panel<\/b><\/td>\n<\/tr>\n
\"Form<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Once the form is laid out, move on to the Workflows, Security and Settings tabs to complete the design.<\/p>\n

Pr\u00f3ximos pasos<\/h2>\n\n\n\n\n\n\n\n\n\n\n
Below are links to articles that cover the next level of detail on form design:<\/td>\n<\/tr>\n
In depth field features and settings<\/a><\/td>\n<\/tr>\n
Form layout part 1: Sections<\/a><\/td>\n<\/tr>\n
Form layout part 2: Columns<\/a><\/td>\n<\/tr>\n
As an example of the many field types available:\u00a0Working with Text fields<\/a><\/td>\n<\/tr>\n
Below are links to the two form building parts of the Building an Expense Reports App tutorial series:<\/td>\n<\/tr>\n
Part 3 – Starting the Expense Reports Form<\/a><\/td>\n<\/tr>\n
Part 4 – Completing the Expense Reports Form<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>","protected":false},"excerpt":{"rendered":"

The Form Editor is where the designer can create the desired form, with the fields and layout they need. It is also where the workflow and form security are set. Form Editor Navigation At the top of the Form Editor, you can navigate between the Design, Workflows, Security and Settings…<\/p>","protected":false},"author":2,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"content-type":"","footnotes":""},"ht-kb-category":[26],"ht-kb-tag":[28],"class_list":["post-456","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-form-editor","ht_kb_tag-form-editor"],"yoast_head":"\nForm Editor Navigation and Overview | GW Apps - Support<\/title>\n<meta name=\"description\" content=\"Form Editor Overview - Learn how to navigate the GW Apps Form Editor, and learn the basics of designing your application forms.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/support.gwapps.com\/es\/knowledge-base\/form-editor-overview\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Form Editor Navigation and Overview | GW Apps - Support\" \/>\n<meta property=\"og:description\" content=\"Form Editor Overview - Learn how to navigate the GW Apps Form Editor, and learn the basics of designing your application forms.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/support.gwapps.com\/es\/knowledge-base\/form-editor-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"GW Apps - Support\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/gwappsinc\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-31T23:17:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/support.gwapps.com\/wp-content\/uploads\/2018\/04\/Form-Editor-Tabs-2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@GWApps_Inc\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/knowledge-base\\\/form-editor-overview\\\/\",\"url\":\"https:\\\/\\\/support.gwapps.com\\\/knowledge-base\\\/form-editor-overview\\\/\",\"name\":\"Form Editor Navigation and Overview | GW Apps - Support\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/knowledge-base\\\/form-editor-overview\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/knowledge-base\\\/form-editor-overview\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/support.gwapps.com\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/Form-Editor-Tabs-2.png\",\"datePublished\":\"2018-04-02T17:55:09+00:00\",\"dateModified\":\"2022-05-31T23:17:18+00:00\",\"description\":\"Form Editor Overview - Learn how to navigate the GW Apps Form Editor, and learn the basics of designing your application forms.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/knowledge-base\\\/form-editor-overview\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/support.gwapps.com\\\/knowledge-base\\\/form-editor-overview\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/knowledge-base\\\/form-editor-overview\\\/#primaryimage\",\"url\":\"https:\\\/\\\/support.gwapps.com\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/Form-Editor-Tabs-2.png\",\"contentUrl\":\"https:\\\/\\\/support.gwapps.com\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/Form-Editor-Tabs-2.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/knowledge-base\\\/form-editor-overview\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/support.gwapps.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Form Editor Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/#website\",\"url\":\"https:\\\/\\\/support.gwapps.com\\\/\",\"name\":\"GW Apps - Support\",\"description\":\"Democratizing web app development for businesses\",\"publisher\":{\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/support.gwapps.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/#organization\",\"name\":\"GW Apps\",\"url\":\"https:\\\/\\\/support.gwapps.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/support.gwapps.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/GWApps_logo_black.png\",\"contentUrl\":\"https:\\\/\\\/support.gwapps.com\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/GWApps_logo_black.png\",\"width\":745,\"height\":357,\"caption\":\"GW Apps\"},\"image\":{\"@id\":\"https:\\\/\\\/support.gwapps.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/gwappsinc\",\"https:\\\/\\\/x.com\\\/GWApps_Inc\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/gwapps\\\/posts\\\/?feedView=all\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCyN1tnP1Owrti0PYxEkQDaQ\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Form Editor Navigation and Overview | GW Apps - Support","description":"Form Editor Overview - Learn how to navigate the GW Apps Form Editor, and learn the basics of designing your application forms.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/support.gwapps.com\/es\/knowledge-base\/form-editor-overview\/","og_locale":"es_MX","og_type":"article","og_title":"Form Editor Navigation and Overview | GW Apps - Support","og_description":"Form Editor Overview - Learn how to navigate the GW Apps Form Editor, and learn the basics of designing your application forms.","og_url":"https:\/\/support.gwapps.com\/es\/knowledge-base\/form-editor-overview\/","og_site_name":"GW Apps - Support","article_publisher":"https:\/\/www.facebook.com\/gwappsinc","article_modified_time":"2022-05-31T23:17:18+00:00","og_image":[{"url":"https:\/\/support.gwapps.com\/wp-content\/uploads\/2018\/04\/Form-Editor-Tabs-2.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@GWApps_Inc","twitter_misc":{"Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/support.gwapps.com\/knowledge-base\/form-editor-overview\/","url":"https:\/\/support.gwapps.com\/knowledge-base\/form-editor-overview\/","name":"Form Editor Navigation and Overview | GW Apps - Support","isPartOf":{"@id":"https:\/\/support.gwapps.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/support.gwapps.com\/knowledge-base\/form-editor-overview\/#primaryimage"},"image":{"@id":"https:\/\/support.gwapps.com\/knowledge-base\/form-editor-overview\/#primaryimage"},"thumbnailUrl":"https:\/\/support.gwapps.com\/wp-content\/uploads\/2018\/04\/Form-Editor-Tabs-2.png","datePublished":"2018-04-02T17:55:09+00:00","dateModified":"2022-05-31T23:17:18+00:00","description":"Form Editor Overview - Learn how to navigate the GW Apps Form Editor, and learn the basics of designing your application forms.","breadcrumb":{"@id":"https:\/\/support.gwapps.com\/knowledge-base\/form-editor-overview\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/support.gwapps.com\/knowledge-base\/form-editor-overview\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/support.gwapps.com\/knowledge-base\/form-editor-overview\/#primaryimage","url":"https:\/\/support.gwapps.com\/wp-content\/uploads\/2018\/04\/Form-Editor-Tabs-2.png","contentUrl":"https:\/\/support.gwapps.com\/wp-content\/uploads\/2018\/04\/Form-Editor-Tabs-2.png"},{"@type":"BreadcrumbList","@id":"https:\/\/support.gwapps.com\/knowledge-base\/form-editor-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/support.gwapps.com\/"},{"@type":"ListItem","position":2,"name":"Form Editor Overview"}]},{"@type":"WebSite","@id":"https:\/\/support.gwapps.com\/#website","url":"https:\/\/support.gwapps.com\/","name":"GW Apps - Soporte","description":"Democratizando el desarrollo de aplicaciones web para empresas","publisher":{"@id":"https:\/\/support.gwapps.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/support.gwapps.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/support.gwapps.com\/#organization","name":"GW Apps","url":"https:\/\/support.gwapps.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/support.gwapps.com\/#\/schema\/logo\/image\/","url":"https:\/\/support.gwapps.com\/wp-content\/uploads\/2021\/04\/GWApps_logo_black.png","contentUrl":"https:\/\/support.gwapps.com\/wp-content\/uploads\/2021\/04\/GWApps_logo_black.png","width":745,"height":357,"caption":"GW Apps"},"image":{"@id":"https:\/\/support.gwapps.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/gwappsinc","https:\/\/x.com\/GWApps_Inc","https:\/\/www.linkedin.com\/company\/gwapps\/posts\/?feedView=all","https:\/\/www.youtube.com\/channel\/UCyN1tnP1Owrti0PYxEkQDaQ"]}]}},"_links":{"self":[{"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/ht-kb\/456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":34,"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/ht-kb\/456\/revisions"}],"predecessor-version":[{"id":5026,"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/ht-kb\/456\/revisions\/5026"}],"wp:attachment":[{"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/ht-kb-category?post=456"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/support.gwapps.com\/es\/wp-json\/wp\/v2\/ht-kb-tag?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}