Templates, Sorgu Görünümü hazırlama
- Özgür Balcı
- serdar ak
Eklenen dahboard id değerinin başına "m_" eklendiğinde eklenen dashboard DLV,KLV, Takvim gibi bir görünüm sekmesi olacaktır. Bu senaryoda iframe olarak açılan dahsborad içerisinden parent içerikteki sorgu değişimleri yakalanıp özel düzenlemeler yapılabilir.
{
ID:"MyDashBoard",
DisplayName:"[$.en:My Dashboard;tr:Benim Panelim]",
IconName:"Layer/newspaper",
__type: "Factory.ActionFactory:HTMLReporter",
ActionTargets:"*",
ConditionMacro:'c.HasPermission("DECE.SYSTEMMANAGER")'
}
Atılacak html dosyanın adı veya yolu jSettings dosyası ile aynı olmayacaksa TemplateFile değeri de json içeriğinde belirtilmelidir. Örnek : TemplateFile:"%AppData%\\App\\GEODI\\GUI\\Custom\\ES\\DashboardTemplates\\MyQueryResult.html"
GeodiQueryJS içeriğindeki hazır yöntemleri kullanabileceğiniz gibi kendi api çağrılarınızıda yapabilirsiniz. Template düzenleme için Template ile sonuç gösterimi dokümanını inceleyebilirsiniz. Template hazırlayabileceğiniz örnek html için tıklayınız.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="[=c.GetCurrentLanguage(true)]">
<head>
<meta charset="utf-8" />
<title>GEODI</title>
<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/jquery-2.1.3.min.js" />
<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/bootstrap.min.js" />
<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/GeodiQueryJS.js" />
<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/GeodiGenericJS.js" />
<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/PlatformCommunication.js" />
<dcc:item factoryname="IncludeCssResource" src="~/GUI/css/GeodiStyle.css" />
<dcc:item factoryname="GeodiSessionInfoHtmlPageItem" />
<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/moment.js" />
<dcc:CultureInfoWriter formattype="DateTime" />
<dcc:item factoryname="IncludeScriptResource" src="~/GUI/js/GeodiHelpManager.js" />
</head>
<body>
<div class=container style="background-color:#fff">
<h1>[$.tr:Dokümanlar;en:Documents]</h1>
<div id=docList></div>
<script type="dece-template" id="myTemplate">
<d:r data="data">
<li>
{{ data.DisplayName }} - {{ data.AdditionalValues.Date }} <br>
<span class="SummaryText __textclass geodiFormatable" contentid="{{data.ContentIdentifier}}">{{data.Summary}}</span>
</li>
</d:r>
</script>
<script>
window.Aborter = new PostAborter();
$(window).ready(function () {
$(window).on("PCCommand",
function (e, obj) {
if (obj.Command == "ExecutedQuery") //sorgula butonuna basıldı.
UpdateQuery(window.parent.CurrentQueryContainer.CurrentQuery);
});
UpdateQuery(window.parent.CurrentQueryContainer.CurrentQuery);
});
function UpdateQuery(query) {
window.Aborter.AbortAll();
$("#docList").empty();
RenderDLV({
Query: query,
TargetDiv: "#docList",
Aborter: window.Aborter,
CurrentWSInfo: window.parent.CurrentQueryContainer.CurrentWSInfo,
wsName: query.wsName,
Template:$("#myTemplate"),
Clear:true
})
}
</script>
</div>
</body>
</html>
ES üzerinde yer alan AddStartMenuItem metodu ile daha ileri özellikler ile menü eklenebilir. Bu işlem için HTML Eklenti hazırlama maddesindeki Component klasörüne bir html atılmalı ve AddStartMenuItem script metodu çağrılarak menü seçeneği eklenmelidir. Menü seçeneğine tıklandığınıda ne yapılacağıda yönetilmelidir.