{"id":8131,"date":"2016-03-17T14:29:02","date_gmt":"2016-03-17T19:29:02","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/docs\/?page_id=8131"},"modified":"2022-03-09T16:33:37","modified_gmt":"2022-03-09T22:33:37","slug":"editing-dictionary-files","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/editing-dictionary-files","title":{"rendered":"Editing Dictionary Files"},"content":{"rendered":"\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\"><em>Click <a href=\"https:\/\/www.mrc-productivity.com\/legacy\/m-power-admin\/editing-dictionary-files\">here<\/a> to access legacy documentation for this feature<\/em><\/p>\n\n\n\n<p>There are several dictionary wide HTML, CSS, and JavaScript files that can be edited in m-Power. Each of these files will open in the same split screen editor that allows you to easily preview your changes. Additionally, several of these files allow you to create secondary versions, giving you the flexibility to include with applications of your choice. This document will show you how to edit the following files:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Header and Footer<\/li><li>Stylesheets<\/li><li>Custom JavaScript files<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"headerfooter\">Header\/Footer HTML<\/h3>\n\n\n\n<p>Editing the Dictionary header and footer files allows you to customize the look and feel of your applications to better match your organization&#8217;s branding. The header and footer are stored as separate html files (mrc_servlet_head.html and mrc_servlet_foot.html) in &#8220;m-power\/mrcjava\/WEB-INF\/classes\/DICTIONARY\/&#8221; and are imported into all of your applications, unless otherwise specified. m-Power provides you with an editor to make changes to either of these files and preview the changes, all on the same screen. To do this, you will need to open the Admin slider &#8211;&gt; HTML\/JS\/CSS FILES &#8211;&gt; Select &#8220;Header\/Footer HTML&#8221;. In these files, the following Freemarker substitutions may be used:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>${visitor.user} &#8211; outputs signed in user (if security is enabled)<\/li><li>${visitor.now} &#8211; outputs the current timestamp<\/li><li>${visitor.library} &#8211; outputs the current dictionary<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"CSS\">Application CSS<\/h3>\n\n\n<p><iframe title=\"Working with m-Power Stylesheets\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/Mj2snUWI1Hs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n\n\n\n<p>Editing m-Power Stylesheets does not require knowledge of CSS, however if familiar, developers are able to edit the CSS directly. This can all be done from the Admin slider menu -&gt; HTML\/JS\/CSS Files &#8211;&gt; Application CSS. Changing colors and fonts used throughout the dictionary is as easy as using the color picker or input (for fonts) in the Variables section and clicking Save in the top menu. The change will immediately be seen in the preview panel and in any applications. The variables are named to give you an indication of what they control. New variables can be created by clicking the Add button at the top of the list. Any new variables can be referenced as &#8216;$variable-name&#8217; in the raw CSS (the following two sections).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"\/docs\/vue-images\/sass.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/mrc-productivity.com\/docs\/vue-images\/sass.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"m-power-custom-styles\">m-Power\/Custom Styles<\/h4>\n\n\n\n<p>The m-Power Styles section, allows you to edit the default styles defined by m-Power, while the Custom Styles section allows you to make your own additions to the currently open stylesheet. m-Power stylesheets are compiled with a pre-processor, known as Sass, before saving to the file. This gives you the option to use Sass features such as nesting CSS selectors, the ability to use variables, mathematical operators (*, \/, +, and -), and much more. A brief tutorial on the basics of Sass can be found <a href=\"https:\/\/sass-lang.com\/guide\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"bourbon\">Bourbon<\/h4>\n\n\n\n<p>m-Power ships a Sass library called Bourbon that can easily be imported into your stylesheets. Bourbon simplifies the way you write CSS by providing several functions (called mixins) that when compiled will return several lines of CSS, leaving less work for you. A full listing of all available Bourbon mixins can be found <a href=\"https:\/\/bourbon.io\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>. While a very powerful tool, stylesheets using Bourbon take a few extra seconds to compile, so only necessary parts are imported by default to boost performance. To use the complete set of Bourbon mixins in any of your stylesheets, click the &#8216;View Source&#8217; button at the top of the Stylesheet Editor. Find the section below and add the import for Bourbon. Then, remove the &#8216;mrc&#8217; import as that file just imports a subset of Bourbon.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/mrc-productivity.com\/docs\/images\/bourbon.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"js\">Creating Custom JavaScript files<\/h3>\n\n\n\n<p>Often developers will need to implement specialized client-side validation, UI effects, or any other component written in JavaScript. This code can be written in m-Power&#8217;s JavaScript editor and easily included in any of your applications. All dictionary JavaScript files are created in m-Power\/mrcjava\/mrcclasses\/DICTIONARY\/js\/. Any existing code or plugins for this dictionary should be placed in that location.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"creating-and-editing-dictionary-javascript-files\">Creating and Editing Dictionary JavaScript files<\/h4>\n\n\n\n<p>The Dictionary Custom JavaScript editor can be accessed in the Admin slider &#8211;&gt; HTML\/JS\/CSS Files &#8211;&gt; Dictionary Javascript. To Add a New JavaScript file or open an existing one use the Files menu on the top bar. The JavaScript editor offers syntax highlighting and linting, autocomplete (Ctrl-Space), Find (Alt-F), and Find and replace (Ctrl-shift-F), among other features.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"including-javascript-files-in-applications\">Including JavaScript files in Applications<\/h4>\n\n\n\n<p>Once you have created JavaScript files, the next step is to include them in your application. To include JavaScript files in your application, you will need to open it in m-Painter and select &#8220;File Include&#8221; from the File menu. Then you will need to switch to the JavaScript tab and drag your files to the right hand column to include them in your application.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/mrc-productivity.com\/docs\/vue-images\/include-file.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/mrc-productivity.com\/docs\/vue-images\/include-js.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"clear: both;\">&nbsp;<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"promoting-to-production\">Promoting to Production<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Header\/Footer HTML: These files are the <strong>mrc_servlet_head.html<\/strong> and <strong>mrc_servlet_foot.html <\/strong>files, respectively. In the Promote to Production utility, these are listed under the &#8216;Other Files&#8217; tab.<\/li><li>Application CSS: The default dictionary stylesheet file is <strong>mrc_default_v3.css<\/strong>. In the Promote to Production utility, this file is listed under the &#8216;Stylesheets&#8217; tab.<\/li><li>Dictionary JavaScript: Any developer created JS files are stored in ..\\m-power\\mrcjava\\mrcclasses\\DATA_DICTIONARY\\js , where &#8216;DATA_DICTIONARY&#8217; is the name of your m-Power data dictionary. These can be added manually to the Promote to Production utility if desired, and would be listed in the &#8216;Other Files&#8217; tab. <\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are several dictionary wide HTML, CSS, and JavaScript files that can be edited in m-Power. Each of these files will open in the same split screen editor that allows you to easily preview your changes. Additionally, several of these files allow you to create secondary versions, giving you the&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[261],"ht-kb-tag":[],"class_list":["post-8131","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-administration"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=8131"}],"version-history":[{"count":79,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8131\/revisions"}],"predecessor-version":[{"id":11813,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8131\/revisions\/11813"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=8131"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=8131"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=8131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}