{"id":1483,"date":"2010-02-15T03:45:03","date_gmt":"2010-02-15T09:45:03","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/docs\/?page_id=1483"},"modified":"2023-11-15T18:59:34","modified_gmt":"2023-11-16T00:59:34","slug":"create-lookup-window-in-m-painter","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/create-lookup-window-in-m-painter","title":{"rendered":"Lookup Window and Return Data"},"content":{"rendered":"\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Click <a href=\"https:\/\/www.mrc-productivity.com\/legacy\/m-painter-app-prop\/create-lookup-window-in-m-painter\">here <\/a>to view the legacy documentation of this feature.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>The Lookup Window is popular because:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lookup Windows are a viable alternative to dropdown lists. mrc recommends using dropdown lists when there are less than 100 options to select. Lookup Windows have no size limitation.<\/li>\n\n\n\n<li>Lookup Windows allow your user to filter and paginate through records easily.<\/li>\n\n\n\n<li>Lookup Windows can return multiple values to multiple inputs on a single form.<\/li>\n<\/ul>\n\n\n\n<p>This example will focus on how to create a Lookup Window link within a Maintainer template; however this process can be utilized in Retrievals and Report applications, as well.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create Separate Multiple Row Data List<\/h2>\n\n\n\n<p>To begin, we first need to create a Multiple Row Data List Retrieval application that will serve as our Lookup Window list. This application should contain all of the necessary fields you wish to pass between the applications. <\/p>\n\n\n\n<p>Once the application has been built and compiled, open m-Painter. Select the field that you wish to serve as the link. Once the data field is highlighted, click the &#8220;Insert Smartlink&#8221; button from the Element Panel on the right. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupSmartlink.jpg\" alt=\"\" width=\"321\" height=\"339\"\/><\/figure>\n\n\n\n<p>On the &#8220;Smartlink Link Type&#8221; screen, select the option to &#8220;Return Data Link&#8221;. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupReturnData.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupReturnData.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Finally, you have the option to set the &#8220;Link Style&#8221; as a normal link or a button style link. Leave the &#8220;Link Target&#8221; as the &#8216;Default Hyperlink&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupLinkStyle.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupLinkStyle.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Click &#8220;Save&#8221; to close the smartlink window. Finally Save m-Painter and return to the maintainer application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create the Lookup Link<\/h2>\n\n\n\n<p>Open m-Painter for the maintainer where we will be adding the Lookup Window link. Select the input you would like the link to be over. Once selected, click the &#8220;Lookup and Return Input Data&#8221; button from the Element Panel on the right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupButton.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Select Retrieval to Lookup Data<\/strong><\/h3>\n\n\n\n<p>This list shows you each retrieval you have available within this Data Dictionary. Since the source for your Lookup Window must be a retrieval, please select the appropriate application (i.e. the one you built in the previous step) from this list.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupDataApp.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupDataApp.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Configure Lookup URL<\/strong><\/h3>\n\n\n\n<p>Once the retrieval is selected, you have the option to add additional URL parameters to further filter the data, including passing fields from the parent app to the lookup retrieval. Do this by selecting the appropriate fields from the dropdowns to map fields from the current app to the lookup retrieval. In this example, we do not need to filter the data further, so will click &#8220;Next&#8221; to move forward.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupAddURL.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupAddURL.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Configure Lookup Options<\/h3>\n\n\n\n<p>This screen allows you to configure the Lookup window.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupOptions.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupOptions.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Link Style<\/h3>\n\n\n\n<p>Choose how you would like the lookup link to display to the end user.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><strong>Link &#8212; <\/strong>Creates a default hyperlink below the input.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupLink.jpg\" alt=\"\"\/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><strong>Button &#8212;<\/strong> Creates a button style link with added ability to choose the button theme (color).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupBtnStyle.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupBtnStyle.jpg\" alt=\"\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><strong>Input Button &#8212;<\/strong> Creates a button link inline with the input.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupInptBtnStyle.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupInptBtnStyle.jpg\" alt=\"\"\/><\/a><\/figure>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Link Text<\/h3>\n\n\n\n<p>This option allows you to customize the text for your Lookup Window link as how it will look at runtime for the end user.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">The &#8220;Input Button&#8221; link style will include a &#8216;search&#8217; icon in the text. This icon can easily be removed via m-Painter after saving the Lookup Window modal.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\"><strong>Dialog Height &amp; Dialog Width<\/strong><\/h3>\n\n\n\n<p>This option allows you to control, in pixels, how large your Lookup Window will be.<\/p>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Map Fields to Return to Inputs on Page<\/h3>\n\n\n\n<p>The dropdown on the right includes all of the fields available from you Lookup Window retrieval. Similarly, the dropdown on the left shows a list of all of the fields from your current application. You will want to match up the fields you wish to return. Click &#8220;Add another field&#8221; to add additional field mappings.<\/p>\n\n\n\n<p>In my example, I want to pass the city, state, zip code and country code from the Lookup retrieval back to my current app (the maintainer). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupFieldMap.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Click &#8220;Save&#8221; to close the window.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lookup at Runtime<\/h2>\n\n\n\n<p>At runtime, when the end user clicks the Lookup Window link, a pop up modal will appear containing the Multiple Row Data List lookup you created.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupRuntimeClick.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupRuntimeClick.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupRuntimeModal.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupRuntimeModal.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>When the user finds the record they wish to select, they simply click the link. The Lookup Window will disappear and the value(s) they selected will be returned to the form (based on the fields you matched within m-Painter).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupRuntimeLink.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupRuntimeLink.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/lookupRuntimeForm.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/lookupRuntimeForm.jpg\" alt=\"\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Overview The Lookup Window is popular because: This example will focus on how to create a Lookup Window link within a Maintainer template; however this process can be utilized in Retrievals and Report applications, as well. Create Separate Multiple Row Data List To begin, we first need to create a&#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":[],"class_list":["post-1483","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mpainter"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1483","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=1483"}],"version-history":[{"count":7,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1483\/revisions"}],"predecessor-version":[{"id":13388,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1483\/revisions\/13388"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=1483"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=1483"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=1483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}