Sample Semantic Component JS Library Templates
From TechWiki
Here is a sample library of Pure JavaScript templates for various types of individual record templates. This library, or modifications to it, is what is used to theme various record types presented via the sWebMap semantic component control.
The nominal source file for this library is sWebMap-templates.js:
var templates = {
"http://purl.org/ontology/now#Assessment_parcels":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<div>Parcel Value: <span class="http_--purl-org-ontology-now-assessmentParcelAssessedValue"></span></div>\
<div>Parcel Building Value: <span class="http_--purl-org-ontology-now-assessmentParcelBuildingValue"></span></div>\
<div>Parcel Land Value: <span class="http_--purl-org-ontology-now-assessmentParcelLandValue"></span></div>\
<div>Building Construction Age: <span class="http_--purl-org-ontology-now-assessmentParcelConstructionYear"></span></div>\
<div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div>\
</div>',
"http://purl.org/ontology/now#HeritageBuildingImage":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<div><a class="http_--purl-org-ontology-now-website@href" href="" target="_blank">Website</a></div>\
<div><a class="http_--purl-org-ontology-now-inventoryOverview@href" href="" target="_blank">Inventory Overview</a></div>\
<div><a class="http_--purl-org-ontology-now-provincialHeritageSite@href" href="" target="_blank">Provincial Heritage Site</a></div>\
<div><a class="http_--purl-org-ontology-now-nalHistoricSite@href" href="" target="_blank">National Heritage Site</a></div>\
<div><a class="http_--purl-org-ontology-now-convervationShortReport@href" href="" target="_blank">Short Report</a></div>\
<div><a class="http_--purl-org-ontology-now-conservationLongReport@href" href="" target="_blank">Long Report</a></div>\
<div><a class="http_--purl-org-ontology-now-link@href" href="" target="_blank">Link</a></div>\
<table width="100%"><tr><td width="75%"><div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div></td><td width="25%"><img class="http_--xmlns-com-foaf-0-1-thumbnailUrl@src" src="" /></td></tr></table>\
</div>',
"http://purl.org/ontology/now#HeritageResourceImage":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<div><a class="http_--purl-org-ontology-now-website@href" href="" target="_blank">Website</a></div>\
<div><a class="http_--purl-org-ontology-now-inventoryOverview@href" href="" target="_blank">Inventory Overview</a></div>\
<div><a class="http_--purl-org-ontology-now-provincialHeritageSite@href" href="" target="_blank">Provincial Heritage Site</a></div>\
<div><a class="http_--purl-org-ontology-now-nationalHistoricSite@href" href="" target="_blank">National Heritage Site</a></div>\
<div><a class="http_--purl-org-ontology-now-convervationShortReport@href" href="" target="_blank">Short Report</a></div>\
<div><a class="http_--purl-org-ontology-now-conservationLongReport@href" href="" target="_blank">Long Report</a></div>\
<div><a class="http_--purl-org-ontology-now-link@href" href="" target="_blank">Link</a></div>\
<table width="100%"><tr><td width="75%"><div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div></td><td width="25%"><img class="http_--xmlns-com-foaf-0-1-thumbnailUrl@src" src="" /></td></tr></table>\
</div>',
"http://purl.org/ontology/npi#Aboriginal_services":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<div>Address: <span class="http_--purl-org-ontology-now-streetAddress"></span>, <span class="http_--purl-org-ontology-now-postalCode"></span></div>\
<div>Phone: <span class="http_--purl-org-ontology-now-phoneNumber"></span></div>\
<div>Affiliated with: <span class="http_--purl-org-ontology-now-affiliatedWith"></span></div>\
<div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div>\
</div>',
"http://purl.org/ontology/npi#Indoor_swimming_pools":
'<div>\
<div><b><span class="skos2008_prefLabel"></span> indoor pool</b></div>\
<div>Address: <span class="http_--purl-org-ontology-now-streetAddress"></span></div>\
</div>',
"http://purl.org/ontology/now#BusStops":
'<div>\
<div><b><a class="http_--xmlns-com-foaf-0-1-homepage@href" href="" target="_blank"><span class="http_--purl-org-ontology-iron-prefLabel"></a></span></b></div>\
</div>',
"http://purl.org/ontology/npi#School":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
</div>',
"http://purl.org/ontology/npi#Neighborhood":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
</div>',
"http://purl.org/ontology/npi#Grove":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-altLabel"></span></b></div>\
</div>',
"http://xmlns.com/foaf/0.1/Image":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<table width="100%"><tr><td width="75%"><div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div></td><td width="25%"><img class="http_--xmlns-com-foaf-0-1-thumbnailUrl@src" src="" /></td></tr></table>\
</div>',
};
"http://purl.org/ontology/now#Assessment_parcels":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<div>Parcel Value: <span class="http_--purl-org-ontology-now-assessmentParcelAssessedValue"></span></div>\
<div>Parcel Building Value: <span class="http_--purl-org-ontology-now-assessmentParcelBuildingValue"></span></div>\
<div>Parcel Land Value: <span class="http_--purl-org-ontology-now-assessmentParcelLandValue"></span></div>\
<div>Building Construction Age: <span class="http_--purl-org-ontology-now-assessmentParcelConstructionYear"></span></div>\
<div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div>\
</div>',
"http://purl.org/ontology/now#HeritageBuildingImage":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<div><a class="http_--purl-org-ontology-now-website@href" href="" target="_blank">Website</a></div>\
<div><a class="http_--purl-org-ontology-now-inventoryOverview@href" href="" target="_blank">Inventory Overview</a></div>\
<div><a class="http_--purl-org-ontology-now-provincialHeritageSite@href" href="" target="_blank">Provincial Heritage Site</a></div>\
<div><a class="http_--purl-org-ontology-now-nalHistoricSite@href" href="" target="_blank">National Heritage Site</a></div>\
<div><a class="http_--purl-org-ontology-now-convervationShortReport@href" href="" target="_blank">Short Report</a></div>\
<div><a class="http_--purl-org-ontology-now-conservationLongReport@href" href="" target="_blank">Long Report</a></div>\
<div><a class="http_--purl-org-ontology-now-link@href" href="" target="_blank">Link</a></div>\
<table width="100%"><tr><td width="75%"><div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div></td><td width="25%"><img class="http_--xmlns-com-foaf-0-1-thumbnailUrl@src" src="" /></td></tr></table>\
</div>',
"http://purl.org/ontology/now#HeritageResourceImage":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<div><a class="http_--purl-org-ontology-now-website@href" href="" target="_blank">Website</a></div>\
<div><a class="http_--purl-org-ontology-now-inventoryOverview@href" href="" target="_blank">Inventory Overview</a></div>\
<div><a class="http_--purl-org-ontology-now-provincialHeritageSite@href" href="" target="_blank">Provincial Heritage Site</a></div>\
<div><a class="http_--purl-org-ontology-now-nationalHistoricSite@href" href="" target="_blank">National Heritage Site</a></div>\
<div><a class="http_--purl-org-ontology-now-convervationShortReport@href" href="" target="_blank">Short Report</a></div>\
<div><a class="http_--purl-org-ontology-now-conservationLongReport@href" href="" target="_blank">Long Report</a></div>\
<div><a class="http_--purl-org-ontology-now-link@href" href="" target="_blank">Link</a></div>\
<table width="100%"><tr><td width="75%"><div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div></td><td width="25%"><img class="http_--xmlns-com-foaf-0-1-thumbnailUrl@src" src="" /></td></tr></table>\
</div>',
"http://purl.org/ontology/npi#Aboriginal_services":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<div>Address: <span class="http_--purl-org-ontology-now-streetAddress"></span>, <span class="http_--purl-org-ontology-now-postalCode"></span></div>\
<div>Phone: <span class="http_--purl-org-ontology-now-phoneNumber"></span></div>\
<div>Affiliated with: <span class="http_--purl-org-ontology-now-affiliatedWith"></span></div>\
<div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div>\
</div>',
"http://purl.org/ontology/npi#Indoor_swimming_pools":
'<div>\
<div><b><span class="skos2008_prefLabel"></span> indoor pool</b></div>\
<div>Address: <span class="http_--purl-org-ontology-now-streetAddress"></span></div>\
</div>',
"http://purl.org/ontology/now#BusStops":
'<div>\
<div><b><a class="http_--xmlns-com-foaf-0-1-homepage@href" href="" target="_blank"><span class="http_--purl-org-ontology-iron-prefLabel"></a></span></b></div>\
</div>',
"http://purl.org/ontology/npi#School":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
</div>',
"http://purl.org/ontology/npi#Neighborhood":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
</div>',
"http://purl.org/ontology/npi#Grove":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-altLabel"></span></b></div>\
</div>',
"http://xmlns.com/foaf/0.1/Image":
'<div>\
<div><b><span class="http_--purl-org-ontology-iron-prefLabel"></span></b></div>\
<table width="100%"><tr><td width="75%"><div style="padding-top: 10px;" class="http_--purl-org-ontology-iron-description"></div></td><td width="25%"><img class="http_--xmlns-com-foaf-0-1-thumbnailUrl@src" src="" /></td></tr></table>\
</div>',
};
Here is an example of the rendering of a set of http://purl.org/ontology/now#HeritageResourceImage records displayed in the sWebMap's resultset:
Here is an example of the rendering of a set of http://purl.org/ontology/now#Assessment_parcels records displayed in the sWebMap's resultset:
