{"id":4872,"date":"2018-03-02T20:45:40","date_gmt":"2018-03-02T15:15:40","guid":{"rendered":"\/?p=4872"},"modified":"2020-08-17T11:45:35","modified_gmt":"2020-08-17T06:15:35","slug":"opening-properties-html-new-tab-card-click-omnisearch","status":"publish","type":"post","link":"https:\/\/www.argildx.us\/technology\/opening-properties-html-new-tab-card-click-omnisearch\/","title":{"rendered":"Opening properties html in a New Tab on Card Click in Omnisearch"},"content":{"rendered":"
Introduction:<\/strong><\/h5>\n

Omnisearch can be triggered by pressing “\/” (forward slash) on a sites.html page, or clicking on the Magnifying glass icon in the top bar.<\/p>\n

\"\"<\/p>\n

Fig. 1 \u2013 Opening Omnisearch<\/p>\n

By default, the results are displayed as cards in an aesthetically pleasing manner. Clicking on a result card opens its properties page in the same tab, but this erases our results page. Going back takes us to the sites.html page from which we initiated the search. If we want to get the same results again, we have to enter the same search term and scroll to the same position. This can get really tiring when you have multiple items to check\/modify.<\/p>\n

\"\"<\/p>\n

Fig. 2 \u2013 Results in Card view<\/p>\n

Requirement: <\/strong><\/h5>\n

Preserve Omnisearch results in sites.html<\/p>\n

We want to preserve the results, so that we can go back and forth without any overheads. This would increase authors’ efficiency and thus save time.<\/p>\n

Analysis:<\/strong><\/h5>\n

In Omnisearch, an AJAX call passes the search parameters to a Sling servlet which returns the results’ HTML markup. Granite UI receives this rudimentary markup, picks only the tags and attributes it needs, translates them to Coral UI-specific tags, and modifies the DOM dynamically. The rendering and behaviour is handled by Coral UI. Sites.html (Touch UI) has thus been designed as a Single Page Application (SPA), powered by the Coral UI and Granite UI libraries.<\/p>\n

When we go back from the properties page, it redirects us to the previous URL. Since it did not store the search results, we don’t see them. Only the initial page source (which is stored in the browser history\/cache) is served.<\/p>\n

Proposed solution: <\/strong><\/h5>\n

The card click should open the link in a new tab<\/p>\n

When the user clicks on the card, the properties page will open in a new tab, thereby preserving the results as they were. After the user is done with the property changes, they can close the tab and return to the results.<\/p>\n

Limitation is that this will only work on card click for sites.html. It will not work for:<\/p>\n

    \n
  1. Clicking the Quick Icons (they appear on mouse hover on the card)<\/li>\n
  2. List view<\/li>\n
  3. Assets, projects, or any other admin interface.<\/li>\n<\/ol>\n
    Discovery:<\/strong><\/h5>\n

    The following are the relevant points from the control flow:<\/p>\n

      \n
    1. There is\u00a0<link rel=”properties” href=”\u2026”\/><\/em> a node in every card’s DOM. The href attribute stores the address to which we have to navigate.<\/li>\n
    2. Shell clientlib listens for clicks on the cards. On being invoked, the listener picks the link tag with the rel=”properties” property from the relevant card, and navigates to it.<\/li>\n<\/ol>\n

      Search results rendering is not a simple task in AEM. Features were probably added over a long time and by different teams with different architects, which has resulted in a spaghetti implementation. Control flow follows confusing paths and there is no consistent data source. Some datasource paths are defined in \/libs and can be overridden, while some are hardcoded into the Omnisearch bundle, which makes extending capabilities very tough. This is why the scope of this blog is limited to its current state.<\/p>\n

      Nevertheless, the new tab functionality for sites.html can be modified without meddling too much with Adobe code.<\/p>\n

      \"\"<\/p>\n

      Fig. 3 \u2013 Desired result. Properties page opens in a new tab<\/p>\n

      Approach:<\/strong><\/h5>\n

      Overlay the Shell clientlib.<\/p>\n

      We shall overlay the Shell clientlib under \/apps, which lets us accomplish our task with minimal effort.<\/p>\n

      Implementation<\/strong><\/h5>\n
        \n
      1. Copy the folder: “\/libs\/granite\/ui\/components\/shell”<\/li>\n
      2. Paste it under \/apps such that the path is: “\/apps\/granite\/ui\/components\/shell”<\/li>\n
      3. Delete all the files in this folder, except \u201cjs\/omnisearch.js\u201d<\/li>\n
      4. Open “js\/omnisearch.js”<\/li>\n
      5. Go to line 827<\/li>\n
      6. Replace the existing function with:<\/li>\n<\/ol>\n
        $(document).on(\"click\", \"#granite-omnisearch-result-content .foundation-collection-navigator\", function(event) {\r\nvar element = $(event.currentTarget).find(\"link[rel=properties]\");\r\nif(this.hasAttribute(\"data-foundation-collection-navigator-href\")){\r\nvar href = element.attr(\"href\");\r\nif (href) {\r\nwindow.location = href;\r\n}\r\n}\r\nelse {\r\nvar href = element.attr(\"href\");\r\nif (href) {\r\nwindow.open(href, \"_blank\");\r\n}\r\n}\r\nevent.preventDefault();\r\n});<\/pre>\n
        \"\"<\/p>\n
        Fig. 4 \u2013 The overlaid JS file and modified content<\/p>\n
        Line 838 is the relevant code for sites.html. We changed it from window.location = href<\/em> to window.open(href,\u201c_blank\u201d)<\/em> which opens the page in a new tab.<\/p>\n
        The condition on Line 829 detects if the search was performed in assets.html. If it evaluates to true, then the default\/old code is executed. Had we not placed the check, then a card-click in assets.html would have opened the link in the same tab and a new tab as well. This is because assets.html cards have an additional attribute called data-foundation-collection-navigator-href<\/em>. When this attribute is combined with the attribute data-foundation-collection-navigator<\/em>, Granite UI treats the card as a link. So, that would have opened the new page in the same tab, and our code (line 829) would have opened it in a new tab.<\/p>\n
        Conclusion:<\/strong><\/h5>\n
        Now when you go to “host:port\/sites.html\/<\/em>” and search something, the card click will open the properties page in a new tab.<\/p>\n
        <\/div>\n
        Anirudh<\/span>\u00a0Garg<\/span><\/b><\/span><\/span><\/div>\n
        AEM Developer
        \n<\/span><\/span><\/div>\n","protected":false},"excerpt":{"rendered":"
        Introduction: Omnisearch can be triggered by pressing “\/” (forward slash) on a sites.html page, or clicking on the Magnifying glass icon in the top bar. Fig. 1 \u2013 Opening Omnisearch By default, the results are displayed as cards in an aesthetically pleasing manner. Clicking on a result card opens its properties page in the same … Read more<\/a><\/p>\n","protected":false},"author":29,"featured_media":7293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","content-type":"","footnotes":""},"categories":[66],"tags":[81,65,25,82,83,84,41,85,27,86,87,88,89,90],"yst_prominent_words":[2365,2361,2367,2360,2358,2354,2364,2352,838,2356,2355,2353,1174,2368,2362,2366,2363,2357,2350,2359],"acf":[],"yoast_head":"\nOpening properties html in a New Tab on Card Click in Omnisearch<\/title>\n<meta name=\"description\" content=\"Omnisearch can get really haphazard and tiring for multiple items if not structured well in AEM. This post helps you simplify and tackle the problem.\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.argildx.us\/technology\/opening-properties-html-new-tab-card-click-omnisearch\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Opening properties html in a New Tab on Card Click in Omnisearch\" \/>\n<meta property=\"og:description\" content=\"Omnisearch can get really haphazard and tiring for multiple items if not structured well in AEM. This post helps you simplify and tackle the problem.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.argildx.us\/technology\/opening-properties-html-new-tab-card-click-omnisearch\/\" \/>\n<meta property=\"og:site_name\" content=\"Argil DX\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-02T15:15:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-17T06:15:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/03\/Opening-properties-html-in-a-new-tab.png\" \/>\n\t<meta property=\"og:image:width\" content=\"431\" \/>\n\t<meta property=\"og:image:height\" content=\"233\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.argildx.us\/#website\",\"url\":\"https:\/\/www.argildx.us\/\",\"name\":\"Argil DX\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.argildx.us\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/technology\/opening-properties-html-new-tab-card-click-omnisearch\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.argildx.us\/wp-content\/uploads\/2018\/03\/Opening-properties-html-in-a-new-tab.png\",\"width\":431,\"height\":233,\"caption\":\"a cartoon figure holding a big magnifying glass with the words search results behind it\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.argildx.us\/technology\/opening-properties-html-new-tab-card-click-omnisearch\/#webpage\",\"url\":\"https:\/\/www.argildx.us\/technology\/opening-properties-html-new-tab-card-click-omnisearch\/\",\"name\":\"Opening properties html in a New Tab on Card Click in Omnisearch\",\"isPartOf\":{\"@id\":\"https:\/\/www.argildx.us\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.argildx.us\/technology\/opening-properties-html-new-tab-card-click-omnisearch\/#primaryimage\"},\"datePublished\":\"2018-03-02T15:15:40+00:00\",\"dateModified\":\"2020-08-17T06:15:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/1c5b6f3f2f7218d9acb851588b98551f\"},\"description\":\"Omnisearch can get really haphazard and tiring for multiple items if not structured well in AEM. This post helps you simplify and tackle the problem.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.argildx.us\/technology\/opening-properties-html-new-tab-card-click-omnisearch\/\"]}]},{\"@type\":[\"Person\"],\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/1c5b6f3f2f7218d9acb851588b98551f\",\"name\":\"Argil DX Media\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0ccbc04705942d1269cdf9f789e58484?s=96&d=mm&r=g\",\"caption\":\"Argil DX Media\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/4872"}],"collection":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/comments?post=4872"}],"version-history":[{"count":0,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/4872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media\/7293"}],"wp:attachment":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media?parent=4872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/categories?post=4872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/tags?post=4872"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/yst_prominent_words?post=4872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}