{"id":415,"date":"2014-02-03T14:21:06","date_gmt":"2014-02-03T14:21:06","guid":{"rendered":"http:\/\/www.heritagedata.org\/blog\/?page_id=415"},"modified":"2019-01-18T11:19:14","modified_gmt":"2019-01-18T11:19:14","slug":"widgets","status":"publish","type":"page","link":"https:\/\/www.heritagedata.org\/blog\/widgets\/","title":{"rendered":"Widgets"},"content":{"rendered":"<p>The widgets are a suite of configurable interactive user interface controls that can be embedded directly within browser based applications to provide access to HeritageData vocabularies. The widgets use the HeritageData <a title=\"Services\" href=\"http:\/\/www.heritagedata.org\/blog\/services\/\">web services<\/a> as their data source, and utilize the local browser cache to avoid repeated service calls to the same resource. The widgets can be utilized through the addition of a small script (usw.seneschal.YYYYMMDD.js) and an associated style sheet (usw.seneschal.YYYYMMDD.css), as shown in the various demonstration pages. In each case you can right click and view source to see exactly how the widgets are being configured and used in the demonstration page.<\/p>\n<p>Note &#8211; the downloadable script is a combined &#8216;minified&#8217; version of a full suite of widget scripts; all scripts are <a title=\"GitHub repository\" href=\"https:\/\/github.com\/cbinding\/SENESCHAL\" target=\"_blank\" rel=\"noopener\">available as Open Source<\/a> under a <a title=\"Creative Commons Attribution (CC-BY)\" href=\"http:\/\/creativecommons.org\/licenses\/by\/3.0\/\" target=\"_blank\" rel=\"noopener\">Creative Commons Attribution (CC-BY)<\/a> license.<\/p>\n<h2>Widget controls<\/h2>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><a href=\"#schemelist\">Scheme list<\/a><\/li>\n<li><a href=\"#schemedetails\">Scheme details<\/a><\/li>\n<li><a href=\"#topconcepts\">Top concepts<\/a><\/li>\n<li><a href=\"#schemedetailscomposite\">Scheme details (composite)<\/a><\/li>\n<li><a href=\"#conceptdetails\">Concept details<\/a><\/li>\n<li><a href=\"#conceptrelations\">Concept relations<\/a><\/li>\n<li><a href=\"#conceptdetailscomposite\">Concept details (composite)<\/a><\/li>\n<li><a href=\"#termsearch\">Term search<\/a><\/li>\n<li><a href=\"#termsuggest\">Term suggest<\/a><\/li>\n<li><a href=\"#widgetinteraction\">Widget interaction<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr \/>\n<h2><a name=\"schemelist\"><\/a>Scheme list<\/h2>\n<p>Displays a selectable drop-down list of all concept schemes currently available in the data store. The list is subdivided according to the originating attributed organisation. Hovering the cursor over any of the schemes in the list pops up a small description of the scheme. Selecting any scheme in the list triggers a notification event that can be handled programmatically so that the selected value can be used in some way within the web page.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-426\" src=\"http:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.schemelist.png\" alt=\"usw.seneschal.schemelist\" width=\"518\" height=\"315\" srcset=\"https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.schemelist.png 518w, https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.schemelist-300x182.png 300w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/p>\n<p>Default styling for the control is obtained from the associated style sheet as class name <i>usw-seneschal-schemelist<\/i>. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.schemelist.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and use the scheme list control.<\/p>\n<hr \/>\n<h2><a name=\"schemedetails\"><\/a>Scheme details<\/h2>\n<p>Displays name and description of a specified scheme. Can be used in conjunction with the <a href=\"#schemelist\">scheme list<\/a> control<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-424\" src=\"http:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.schemedetails.png\" alt=\"usw.seneschal.schemedetails\" width=\"408\" height=\"108\" srcset=\"https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.schemedetails.png 408w, https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.schemedetails-300x79.png 300w\" sizes=\"(max-width: 408px) 100vw, 408px\" \/><\/p>\n<p>Default styling for the control is obtained from the associated style sheet as class name <i>usw-seneschal-schemedetails<\/i>. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.schemedetails.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and use the scheme details control.<\/p>\n<hr \/>\n<h2><a name=\"topconcepts\"><\/a>Top concepts<\/h2>\n<p>Displays a list of top (hierarchical root) concepts for a selected scheme. Hovering over any of the concepts displays the identifier of the concept in the footer area. Selecting any concept in the list triggers a notification event that can be handled programmatically so that the selected value can be used in some way within the web page.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-428\" src=\"http:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.topconcepts.png\" alt=\"usw.seneschal.topconcepts\" width=\"407\" height=\"158\" srcset=\"https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.topconcepts.png 407w, https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.topconcepts-300x116.png 300w\" sizes=\"(max-width: 407px) 100vw, 407px\" \/><\/p>\n<p>Default styling for the control is obtained from the associated style sheet as class name <i>usw-seneschal-topconcepts<\/i>. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.topconcepts.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and use the top concepts control.<\/p>\n<hr \/>\n<h2><a name=\"schemedetailscomposite\"><\/a>Scheme details (composite)<\/h2>\n<p>Combines the <a href=\"#schemedetails\">scheme details<\/a> and <a href=\"#topconcepts\">top concepts<\/a> controls into a single unit.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-425\" src=\"http:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.schemedetailscomposite.png\" alt=\"usw.seneschal.schemedetailscomposite\" width=\"406\" height=\"261\" srcset=\"https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.schemedetailscomposite.png 406w, https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.schemedetailscomposite-300x192.png 300w\" sizes=\"(max-width: 406px) 100vw, 406px\" \/><\/p>\n<p>Default styling for the control is obtained from the associated style sheet as class name <i>usw-seneschal-schemedetailscomposite<\/i>. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.schemedetailscomposite.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and use the scheme details (composite) control.<\/p>\n<hr \/>\n<h2><a name=\"conceptdetails\"><\/a>Concept details<\/h2>\n<p>Displays labels and scope notes for a selected concept. Can be used in conjunction with any other control that allows selection of concepts.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-421\" src=\"http:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.conceptdetails.png\" alt=\"usw.seneschal.conceptdetails\" width=\"405\" height=\"258\" srcset=\"https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.conceptdetails.png 405w, https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.conceptdetails-300x191.png 300w\" sizes=\"(max-width: 405px) 100vw, 405px\" \/><\/p>\n<p>Default styling for the control is obtained from the associated style sheet as class name <i>usw-seneschal-conceptdetails<\/i>. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.conceptdetails.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and use the concept details control.<\/p>\n<hr \/>\n<h2><a name=\"conceptrelations\"><\/a>Concept relations<\/h2>\n<p>Displays a list of concepts related to the selected concept via broader (&#8216;BT&#8217;), narrower (&#8216;NT&#8217;) or related (&#8216;RT&#8217;) links. Selecting any of the displayed links allows interactive navigation of the concept space and also triggers a notification event that can be handled programmatically so that the selected value can be used in some way within the web page.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-423\" src=\"http:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.conceptrelations.png\" alt=\"usw.seneschal.conceptrelations\" width=\"408\" height=\"107\" srcset=\"https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.conceptrelations.png 408w, https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.conceptrelations-300x78.png 300w\" sizes=\"(max-width: 408px) 100vw, 408px\" \/><\/p>\n<p>Default styling for the control is obtained from the associated style sheet as class name <i>usw-seneschal-conceptrelations<\/i>. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.conceptrelations.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and use the concept relations control.<\/p>\n<hr \/>\n<h2><a name=\"conceptdetailscomposite\"><\/a>Concept details (composite)<\/h2>\n<p>Combines the <a href=\"#conceptdetails\">concept details<\/a> and <a href=\"#conceptrelations\">concept relations<\/a> controls into a single unit.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-422\" src=\"http:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.conceptdetailscomposite.png\" alt=\"usw.seneschal.conceptdetailscomposite\" width=\"408\" height=\"358\" srcset=\"https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.conceptdetailscomposite.png 408w, https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.conceptdetailscomposite-300x263.png 300w\" sizes=\"(max-width: 408px) 100vw, 408px\" \/><\/p>\n<p>Default styling for the control is obtained from the associated style sheet as class name <i>usw-seneschal-conceptdetailscomposite<\/i>. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.conceptdetailscomposite.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and use the concept details (composite) control.<\/p>\n<hr \/>\n<h2><a name=\"termsearch\"><\/a>Term search<\/h2>\n<p>Control for searching on terms (preferred or alternate labels) within a specified scheme. The user may choose whether the term to find <i>starts with<\/i> or <i>contains<\/i> the specified text. Returned results are highlighted to show where the match occurred. Results are clickable links, selecting any concept in the list triggers a notification event that can be handled programmatically so that the selected value can be used in some way within the web page. The footer displays the number of results returned, hovering over any result displays the identifier for that concept.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-427\" src=\"http:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.termsearch.png\" alt=\"usw.seneschal.termsearch\" width=\"406\" height=\"209\" srcset=\"https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.termsearch.png 406w, https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.termsearch-300x154.png 300w\" sizes=\"(max-width: 406px) 100vw, 406px\" \/><\/p>\n<p>Default styling for the control is obtained from the associated style sheet as class name <i>usw-seneschal-termsearch<\/i>. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.termsearch.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and use the term search control.<\/p>\n<hr \/>\n<h2><a name=\"termsuggest\"><\/a>Term suggest<\/h2>\n<p>A drop down list of suggestions as the user types.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-453\" src=\"http:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.termsuggest1.png\" alt=\"usw.seneschal.termsuggest\" width=\"411\" height=\"125\" srcset=\"https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.termsuggest1.png 411w, https:\/\/www.heritagedata.org\/blog\/wp-content\/uploads\/2014\/02\/usw.seneschal.termsuggest1-300x91.png 300w\" sizes=\"(max-width: 411px) 100vw, 411px\" \/><\/p>\n<p>Default styling for the control is obtained from the associated style sheet as class name <i>usw-seneschal-termsuggest<\/i>. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.termsuggest.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and use the term search control.<\/p>\n<hr \/>\n<h2><a name=\"widgetinteraction\"><\/a>Widget interaction<\/h2>\n<p>The individual widgets can be assembled to form larger controls. <a href=\"https:\/\/www.heritagedata.org\/live\/widgets\/usw.seneschal.widgetinteraction.html\" target=\"_blank\" rel=\"noopener\">A demonstration page<\/a> shows how to configure and make the the widgets interact with each other.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The widgets are a suite of configurable interactive user interface controls that can be embedded directly within browser based applications to provide access to HeritageData vocabularies. The widgets use the HeritageData web services as their data source, and utilize the &hellip; <a href=\"https:\/\/www.heritagedata.org\/blog\/widgets\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.heritagedata.org\/blog\/wp-json\/wp\/v2\/pages\/415"}],"collection":[{"href":"https:\/\/www.heritagedata.org\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.heritagedata.org\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.heritagedata.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heritagedata.org\/blog\/wp-json\/wp\/v2\/comments?post=415"}],"version-history":[{"count":18,"href":"https:\/\/www.heritagedata.org\/blog\/wp-json\/wp\/v2\/pages\/415\/revisions"}],"predecessor-version":[{"id":552,"href":"https:\/\/www.heritagedata.org\/blog\/wp-json\/wp\/v2\/pages\/415\/revisions\/552"}],"wp:attachment":[{"href":"https:\/\/www.heritagedata.org\/blog\/wp-json\/wp\/v2\/media?parent=415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}