m-Painter Source Mode Features

Overview

This document’s aim is to cover some of the notable features now available within the HTML editor/source mode via m-Painter.

Editor Features

  • Basic Features Improved

    • Finding, replacing, indenting, and formatting the layout overall are significantly improved within this text editor.
  • Improved organization of application asset files

      
    • Best practice coding includes separating application assets (CSS and JavaScript) away from the application’s HTML. m-Painter now lets you do this. Via the source mode, click the JS or CSS tab, and a new window will appear. This separate file will be invoked by your application but the resulting code will be located in a different file. This file will be located in either /mrcclasses/DATADICTIONARY/APP/js or /mrcclasses/DATADICTIONARY/APP/css. Promote to production will automatically promote these files during a typical promotion event.
  • Diff (Difference) Checker

    • You can now run a Diff check when accessing the a previous m-Painter version’s source. Simply click the “Diff tool” button and m-Painter will illustrate the differences between the selected prior version and the current version. Please note this is only for visual reference.
  • Typeahead suggestions

    • Within the source, m-Painter will assist by adding code snippets based on what you have typed. To activate, simply start typing and press enter when the option you want is selected. Doing so will add the applicable code block where your cursor is currently located. Some valid typeahead suggestions currently available are: Freemarker syntax (if, else, assign, lookup), popular jQuery, imports, Bootstrap (row, card).In this example, you can see I have typed in “if” and pressed enter:
    • As you can see, m-Painter as added all the necessary code syntax for me to now customize.
  • Document Formatting

    • This is handy if you would like to clean up the look of your document by aligning the text in a standard way. To do so, right click on the page and select “Format Document.”
  • Section collapse/expand

    • You can quickly collapse any section of code by finding the first line of that section. Directly between the line number and the text, you will find a chevron pointing down. Clicking on that arrow, will cause that entire section of HTML to collapse into a single line. Repeat the process to expand said selection.

Miscellaneous Features/Settings

  • Command Palette

    • Pressing F1 will cause a dialog window to appear with many features that are included into the plugin by default. Please share with us if you find any of these options to be particularly useful.
  • Theming

    • This editor comes with 3 standard themes:
      • VS: (White)
      • VS-Dark (Black) – Default
      • HC-Black (High Contrast Black)
    • The default option may be set per Data Dictionary in Admin -> Dictionary Configuration -> Interface and Build Settings -> via the “mrc Editor Theme” property.
    • Should individual developers want to set their own default theme that is different than the dictionary default, they may do so directly in the m-Painter source of any application they are working in:

Updated on October 1, 2021

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support