{"id":3877,"date":"2023-02-09T11:45:50","date_gmt":"2023-02-09T11:45:50","guid":{"rendered":"https:\/\/info.documotor.com\/?page_id=3877"},"modified":"2023-02-09T12:13:08","modified_gmt":"2023-02-09T12:13:08","slug":"template-editor","status":"publish","type":"page","link":"https:\/\/info.documotor.com\/?page_id=3877","title":{"rendered":"Template Editor"},"content":{"rendered":"\n<p>DocuMotor&#8217;s user interface (UI) is split up into three main panes located on the left, in the center, and on the right side of the screen. These panes will be called the Data Pane, the Edit Pane, and the Result Pane respectively. Each pane holds different functionalities meeting the users&#8217; needs, and the panes can switch views between these functionalities. The UI also has a top bar containing the overall functionalities needed for all three view panes. <\/p>\n\n\n\n<p>Furthermore, it is possible to adjust the size of the three view panes. When hovering the mouse over the lines splitting the panes, a slider will appear, and it is possible to drag the slider to the left and right which will adjust the size of the panes adjacent to the slider. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"500\" src=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/InitialView-1024x500.png\" alt=\"\" class=\"wp-image-4856\" srcset=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/InitialView-1024x500.png 1024w, https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/InitialView-300x146.png 300w, https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/InitialView-768x375.png 768w, https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/InitialView-1536x750.png 1536w, https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/InitialView.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h3>Top bar<\/h3>\n\n\n\n<p>The top bar is the only component that stays the same no matter what view the user selects in the three main panes. The top bar contains settings that applies to the entire DocuMotor template.  <\/p>\n\n\n\n<p><strong>Code snippets<\/strong><\/p>\n\n\n\n<p>The first functionality in the top bar is to get code snippets to generate the template through the DocuMotor API. Here it is possible to get either a <code>curl <\/code>snippet or a <code>postman <\/code>snippet.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"758\" src=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/12\/snippets-1024x758.png\" alt=\"\" class=\"wp-image-4072\" srcset=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/12\/snippets-1024x758.png 1024w, https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/12\/snippets-300x222.png 300w, https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/12\/snippets-768x568.png 768w, https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/12\/snippets.png 1170w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Tags<\/strong><\/p>\n\n\n\n<p>Next to the snippets button is the button for adding or removing tags in the template. The tags are used to define the template under a specific group or theme. This makes it possible to then get a list of all templates with specific tags from the DocuMotor API. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"623\" height=\"311\" src=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/tags-4.png\" alt=\"\" class=\"wp-image-4039\" srcset=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/tags-4.png 623w, https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/tags-4-300x150.png 300w\" sizes=\"(max-width: 623px) 100vw, 623px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Breadcrumbs and Status Identification<\/strong><\/p>\n\n\n\n<p>The breadcrumbs show where the current template is located in the DocuMotor. These breadcrumbs are currently not navigational and are at the moment just for informatic purposes.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"933\" height=\"101\" src=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/Breadcrumbs.png\" alt=\"\" class=\"wp-image-4050\" srcset=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/Breadcrumbs.png 933w, https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/Breadcrumbs-300x32.png 300w, https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/Breadcrumbs-768x83.png 768w\" sizes=\"(max-width: 933px) 100vw, 933px\" \/><\/figure><\/div>\n\n\n\n<p>Furthermore, the breadcrumbs area also shows the status of the template when running or saving the template. If no errors are in the template or in the transformation, the breadcrumbs area will turn green and confirm the action. <\/p>\n\n\n\n<p>For example, when running the transformation, it will show a loading indicator followed by either a green success message, a red warning message, or a warning\/error icon including the number of warnings\/errors in the transformation. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"809\" height=\"181\" src=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/StatusIdentification.jpg\" alt=\"\" class=\"wp-image-4854\" srcset=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/StatusIdentification.jpg 809w, https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/StatusIdentification-300x67.jpg 300w, https:\/\/info.documotor.com\/wp-content\/uploads\/2023\/02\/StatusIdentification-768x172.jpg 768w\" sizes=\"(max-width: 809px) 100vw, 809px\" \/><\/figure><\/div>\n\n\n\n<p>When a warning or error icon is shown, it is possible to see what the warning\/error message is by clicking the icon. <\/p>\n\n\n\n<p><strong>Settings<\/strong><\/p>\n\n\n\n<p>The settings button opens a dialog that makes it possible to see when the data was last modified and who modified it. It is also possible to change different settings for the template. The settings possible to change are enabling or disabling:<\/p>\n\n\n\n<ul><li>Record Sample Data &#8211; This feature will automatically fetch the sample data from a third party when turned on.<\/li><li>Trim End &#8211; This feature will remove blank pages at the end of the generated document when turned on.<\/li><li>Output as PDF &#8211; This feature will output the generated document as a PDF when turned on. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"728\" height=\"542\" src=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/settings.png\" alt=\"\" class=\"wp-image-4053\" srcset=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/settings.png 728w, https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/settings-300x223.png 300w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Save<\/strong><\/p>\n\n\n\n<p>When clicking the save button, it will prompt the user with information about what changes have been made, and if the user is sure they want to save the changes. Clicking &#8220;Apply&#8221; in the prompt will save all changes and update the information in the settings menu about when the data has been modified and by who.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"605\" height=\"385\" src=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/Save.png\" alt=\"\" class=\"wp-image-4061\" srcset=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/Save.png 605w, https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/11\/Save-300x191.png 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Run<\/strong><\/p>\n\n\n\n<p>The run button will run the transformation and generate the document. However, if the tab called &#8220;Transformation Result&#8221; is the active tab in the result pane only the transformation will be evaluated since it will not be necessary to generate the template in the background. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"249\" height=\"281\" src=\"https:\/\/info.documotor.com\/wp-content\/uploads\/2022\/12\/Run.png\" alt=\"\" class=\"wp-image-4068\"\/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>DocuMotor&#8217;s user interface (UI) is split up into three main panes located on the left, in the center, and on the right side of the screen. These panes will be called the Data Pane, the Edit Pane, and the Result Pane respectively. Each pane holds different functionalities meeting the users&#8217; needs, and the panes can [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":3160,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/3877"}],"collection":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/info.documotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3877"}],"version-history":[{"count":40,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/3877\/revisions"}],"predecessor-version":[{"id":5110,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/3877\/revisions\/5110"}],"up":[{"embeddable":true,"href":"https:\/\/info.documotor.com\/index.php?rest_route=\/wp\/v2\/pages\/3160"}],"wp:attachment":[{"href":"https:\/\/info.documotor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}