{"id":13507,"date":"2023-11-27T12:36:55","date_gmt":"2023-11-27T18:36:55","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?post_type=ht_kb&#038;p=13507"},"modified":"2025-02-25T10:57:43","modified_gmt":"2025-02-25T16:57:43","slug":"inserting-fields-to-an-existing-app","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/inserting-fields-to-an-existing-app","title":{"rendered":"Inserting Fields to an Existing App"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>For a variety of reasons, you may find the need to add a data field from your app specs\/field settings into your application <em>after<\/em> your app has been compiled and HTML generated. m-Painter allows you to insert any field from your app specs without having to overwrite your HTML. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/insertFields.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFields.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Fields to Insert<\/h2>\n\n\n\n<p>From the left-hand Component Panel, there are two types of fields that can be inserted via m-Painter: Fields in this app and System Fields.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fields in this App<\/h3>\n\n\n\n<p>The listed fields are pulled from the Field Settings screen of your application specifications.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFieldsFromApp.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">All fields from Field Settings will <strong>show <\/strong>in this list regardless if set to Display\/Hide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">System Fields<\/h3>\n\n\n\n<p>Developers can insert data values pulled from the system instead of from the configured dataset. These values include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Current Username<\/li>\n\n\n\n<li>Data Dictionary<\/li>\n\n\n\n<li>Session ID<\/li>\n\n\n\n<li>System Date (ISO)<\/li>\n\n\n\n<li>System Time (ISO)<\/li>\n\n\n\n<li>Today<\/li>\n\n\n\n<li>Yesterday<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">System Value Fields can only be inserted at the current cursor position.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"datetimeformatting\">Date and Time Formatting<\/h3>\n\n\n\n<p>The default format when inserting a system date is yyyy-MM-dd and a system time is HH:mm:ss. However, m-Painter allows the ability to change the format to suite your user needs.<\/p>\n\n\n\n<p>Once the system field is inserted, left-click to select the field. On the right side Element Panel -&gt; Element Options, select &#8220;Format Date\/Time Field&#8221;. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/mPainterDateFormatElementPanel.png\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p> Select the desired format from the available list of options.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/mPainterDateFormatOptions.png\" alt=\"\"\/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/mPainterDateFormatTimeOptions.png\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p>You also have the option of manually typing a custom format into the &#8220;Selected Format&#8221; box. Please see&nbsp;<a href=\"https:\/\/docs.oracle.com\/javase\/6\/docs\/api\/java\/text\/SimpleDateFormat.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>this document<\/strong><\/a>&nbsp;for a list of the values that can be used when building your formats.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">This date\/time formatting can also be applied to database date and time fields from your application. To use this feature, the fields must be set to their default formats\u2014&#8217;yyyy-MM-dd&#8217; for dates and &#8216;HH:mm:ss&#8217; for times\u2014from Field Settings.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/mPainterDateFormatDefault.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Default formatting<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/mPainterDateFormatFinal.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">After applying format<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Insert to Current Position<\/h2>\n\n\n\n<p>The first icon to the right of the field will insert the respective data field into the location of your cursor&#8217;s current position.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFieldsCursor.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFieldsCurPos.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFieldsCursor2.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Append to Data Table<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Data Lists<\/h3>\n\n\n\n<p>The second icon to the right of the field will append an entire column to the end of the data table. This will include the field description as the column header and the data value in the data cell.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFieldsAppend.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFieldsAppendDataList.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Reports<\/h3>\n\n\n\n<p>m-Painter is smart enough to include the appropriate levels if inserting into a Report template.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/insertFieldsReportLevels.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFieldsReportLevels.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>If a field is set to &#8220;Hide&#8221; from the Field Settings screen in the App Specs, this option is unavailable.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFieldsHidden.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Web Form<\/h3>\n\n\n\n<p>Appending a field to a Single Row Form will append the field\/input to the bottom of the form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/insertFieldsForm.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/insertFieldsForm.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview For a variety of reasons, you may find the need to add a data field from your app specs\/field settings into your application after your app has been compiled and HTML generated. m-Painter allows you to insert any field from your app specs without having to overwrite your HTML&#8230;.<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[255],"ht-kb-tag":[277],"class_list":["post-13507","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mpainter","ht_kb_tag-m-painter"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13507","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=13507"}],"version-history":[{"count":8,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13507\/revisions"}],"predecessor-version":[{"id":14459,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13507\/revisions\/14459"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=13507"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=13507"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=13507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}