{"id":944,"date":"2015-12-07T09:00:20","date_gmt":"2015-12-07T08:00:20","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=944"},"modified":"2023-02-01T14:25:38","modified_gmt":"2023-02-01T13:25:38","slug":"customowe-akcje-wyszukanego-elementu","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/customowe-akcje-wyszukanego-elementu\/","title":{"rendered":"Customowe akcje wyszukanego elementu"},"content":{"rendered":"\n<p>SharePoint dostarcza nam kilka domy\u015blnych akcji, kt\u00f3rych mo\u017cemy u\u017cy\u0107 na ka\u017cdym z element\u00f3w dostarczonych nam przez wyszukiwark\u0119. Znajdziemy tu mo\u017cliwo\u015b\u0107 otwarcia elementu, \u015bledzenia go czy te\u017c udost\u0119pnienia. Co jednak w sytuacji, gdy chcemy da\u0107 u\u017cytkownikowi mo\u017cliwo\u015b\u0107 podj\u0119cia stworzonej przez nas akcji?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Display Templates<\/h2>\n\n\n\n<p>Z pomoc\u0105 przychodz\u0105 nam Display Templates, czyli szablony element\u00f3w wy\u015bwietlanych przez SharePoint. To w\u0142a\u015bnie dzi\u0119ki nim mamy mo\u017cliwo\u015b\u0107 zmiany domy\u015blnego wygl\u0105du interfejsu u\u017cytkownika. W du\u017cym uproszczeniu: s\u0105 to pliki HTML, kt\u00f3rych SharePoint u\u017cywa do wygenerowania skrypt\u00f3w JavaScript, potrzebnych do wy\u015bwietlenia odpowiednich element\u00f3w. Istnieje wiele domy\u015blnych szablon\u00f3w, kt\u00f3re mo\u017cemy zmieni\u0107. W tym artykule zajmiemy si\u0119 tym, kt\u00f3ry jest odpowiedzialny za akcje wy\u015bwietlane po najechaniu myszk\u0105 na wyszukany element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Aktywacja Publishing Infrastructure<\/h2>\n\n\n\n<p>Zanim zaczniemy dzia\u0142a\u0107, musimy pami\u0119ta\u0107 o jednej bardzo wa\u017cnej rzeczy \u2013 domy\u015blnie nie zobaczymy plik\u00f3w .html szablon\u00f3w, a jedynie wygenerowane ju\u017c wcze\u015bniej skrypty. Aby zmieni\u0107 taki stan, musimy na poziomie kolekcji witryn aktywowa\u0107 feature o nazwie \u201eSharePoint Server Publishing Infrastructure\u201d, kt\u00f3ry rozszerza dost\u0119pne mo\u017cliwo\u015bci konfiguracji wizualnej naszych stron. Efekty aktywacji zobaczymy od razu po wej\u015bciu na stron\u0119 ustawie\u0144 w sekcji \u201eLook and design\u201d. Sam proces aktywacji przebiega wed\u0142ug krok\u00f3w opisanych w instrukcji dost\u0119pnej\u00a0<a href=\"https:\/\/support.office.com\/en-us\/article\/Enable-publishing-features-479677a6-8b33-4ac7-907d-071c1c7e4518\" rel=\"nofollow\" >tutaj<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/Publishing.jpg\"><img decoding=\"async\" width=\"840\" height=\"250\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/Publishing.jpg\" alt=\"Publishing\" class=\"wp-image-19152\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/Publishing.jpg 840w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/Publishing-300x89.jpg 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/Publishing-768x229.jpg 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Edycja szablonu<\/h2>\n\n\n\n<p>Teraz mo\u017cemy ju\u017c przyst\u0105pi\u0107 do modyfikacji szablonu. Zrobimy to, stosuj\u0105c si\u0119 do nast\u0119puj\u0105cych krok\u00f3w:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Z poziomu root\u2019a naszej kolekcji witryn klikamy w\u00a0<strong>Settings -> Site settings<\/strong>.<\/li><li>Na stronie ustawie\u0144 w sekcji\u00a0<strong>Web Designer Galleries<\/strong>\u00a0wybieramy\u00a0<strong>Master pages and page layouts<\/strong>.<\/li><li>Przechodzimy do folderu\u00a0<strong>Display Templates\/Search<\/strong>\u00a0i znajdujemy plik\u00a0<strong>Item_CommonHoverPanel_Actions.html<\/strong>.<\/li><li>\u015aci\u0105gamy plik i tworzymy jego kopi\u0119 zapasow\u0105 (wa\u017cne!).<\/li><li>Otwieramy plik w dowolnym edytorze tekstu i odnajdujemy poni\u017csze miejsce:<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/CustomActionCodePlacement-e1448354084943.png\"><img decoding=\"async\" width=\"840\" height=\"215\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/CustomActionCodePlacement-e1448354084943.png\" alt=\"CustomActionCodePlacement\" class=\"wp-image-19150\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/CustomActionCodePlacement-e1448354084943.png 840w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/CustomActionCodePlacement-e1448354084943-300x77.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/CustomActionCodePlacement-e1448354084943-768x197.png 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/a><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>We wskazanej linii wklejamy nast\u0119puj\u0105cy kod:<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nwindow.CustomFunction = function (title, path) {\n  var options = {\n  url: path,\n  title: title\n };\n\n SP.SOD.execute(&#039;sp.ui.dialog.js&#039;, &#039;SP.UI.ModalDialog.showModalDialog&#039;, options);\n}\n\nif($isNull(ctx.CurrentItem.csr_IsSite)){\n_#--&gt;\n&amp;lt;div class=&quot;ms-srch-hover-action&quot;&gt;\n\t&amp;lt;a onclick=&quot;window.CustomFunction(&#039;Otw\u00f3rz okno dialogowe&#039;, &#039;_#= $scriptEncode(ctx.CurrentItem.Path) =#_&#039;);&quot; href=&quot;javascript:void(0)&quot; class=&quot;ms-calloutLink ms-uppercase&quot;&gt;Otw\u00f3rz okno dialogowe&amp;lt;\/a&gt;\n&amp;lt;\/div&gt;\n&amp;lt;!--#_\n}\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Zapisujemy plik i wysy\u0142amy do naszego SharePointa w to samo miejsce, sk\u0105d go pobrali\u015bmy.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ko\u0144cowy efekt<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/FinalEffect-e1448354134470.png\"><img decoding=\"async\" width=\"840\" height=\"171\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/FinalEffect-e1448354134470.png\" alt=\"FinalEffect\" class=\"wp-image-19156\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/FinalEffect-e1448354134470.png 840w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/FinalEffect-e1448354134470-300x61.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/FinalEffect-e1448354134470-768x156.png 768w\" sizes=\"(max-width: 840px) 100vw, 840px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Jak wida\u0107, nowa akcja pojawi\u0142a si\u0119 w menu dost\u0119pnym po najechaniu myszk\u0105 na wybrany element wyszukiwania. Jest ona dost\u0119pna tylko dla element\u00f3w innych ni\u017c strony, co zrealizowali\u015bmy przy pomocy instrukcji warunkowej, wewn\u0105trz kt\u00f3rej umie\u015bcili\u015bmy nasz link. Oczywi\u015bcie, przy pomocy JavaScriptu jeste\u015bmy w stanie dostosowa\u0107 jej wy\u015bwietlanie do naszych potrzeb. W tym przyk\u0142adzie, klikni\u0119cie linka spowoduje pojawienie si\u0119 okna dialogowego. Podczas pisania w\u0142asnych funkcji w szablonie nale\u017cy pami\u0119ta\u0107, \u017ce musimy zabezpiecza\u0107 si\u0119 przed sytuacjami, gdy skrypty, z kt\u00f3rych korzystamy nie s\u0105 jeszcze wczytane, a tak\u017ce \u2013 by by\u0142y one dost\u0119pne globalnie.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;944&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;0\\\/5 ( votes: 0)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Customowe akcje wyszukanego elementu&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            <span class=\"kksr-muted\"><\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>SharePoint dostarcza nam kilka domy\u015blnych akcji, kt\u00f3rych mo\u017cemy u\u017cy\u0107 na ka\u017cdym z element\u00f3w dostarczonych nam przez wyszukiwark\u0119. Znajdziemy tu mo\u017cliwo\u015b\u0107 &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/customowe-akcje-wyszukanego-elementu\/\">Continued<\/a><\/p>\n","protected":false},"author":19,"featured_media":1839,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[56,166,167,164,169,165,170,168],"class_list":["post-944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-sharepoint","tag-actions","tag-akcje","tag-custom","tag-display","tag-search","tag-templates","tag-wyszukiwanie"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2016\/01\/SharePointSearch.jpg","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/944"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=944"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/944\/revisions"}],"predecessor-version":[{"id":19159,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/944\/revisions\/19159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/1839"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}