Arayüzlerde html, script ekleyerek özelleştirme yapabilir, ES arayüzü için yeni görünümler hazırlayabilirsiniz.

Table of Contents

Html eklenti yazma

Eklentileri arayüzleri özelleştirmek, Sayfaya html, script eklemek için kullanabilirsiniz.

%appdata%App/GEODI/GUI/Custom/ES/Component veya uygulama yanındaki GUI/Custom/ES/Component altındaki klasörlere atacağınız klasörüne atacağınız html dosyalar ES ve DA arayüzlerine dahil olacaktır. Bu yöntem ile sayfa içeriğindeki tüm olay ve sınıflara erişebilirsiniz. yanına bir jsettings dosyası ekleyerek hangi koşullarda çalışacağını ayarlayabilirsiniz. jsettings uzantılı tanım dosyası yoksa html koşulsuz içeriğe eklenir.

jSettings tanım dosyasında ConditionMacro alanında makro kullanılarak istenilen koşullar sağlandığında eklentinin yüklenmesi sağlanabilir. jSettings conditionMakro nesnesi GeodiWorkspace dir.

jSettings tanım dosyasında ActinTargets alanına * veya eklentinin çalışması istenilen proje adları virgül ile ayrılarak yazılabilir.

Harita arayüzü için component klasörü GUI/Custom/Map/Component, jSettings conditionMakro nesnesi GeodiWorkspace dir.

Viewer arayüzleri için component klasörü GUI/Custom/Viewer/Default/Script ve GUI/Custom/Viewer/Default/RightPanel jSettings conditionMakro nesnesi GeodiWorkspace dir.

HTML Report sayfasında anlatılan sunucu tag'leri kullanılabilir. Html içine Makro data null değerdedir, nesnesi kullanılamaz.

Code Block

language	xml
title	MyComponent.html

<script>
	alert("Component loaded")
</script>

Code Block

language	xml
title	MyComponent.html

<dcc:panel visible='c["geodi"].GetSessionWSName()=="MyProject"'>
<script>
	alert("Component loaded")
</script>
</dcc:panel>

Dashboard hazırlama

%appdata%App/GEODI/GUI/Custom/ES/Dashboard veya uygulama yanındaki GUI/Custom/ES/Dashboard altındaki klasörlere atacağınız klasörüne atacağınız html veya jsettings uzantılı tanım dosyası ile dashboardları hazırlayabilirsiniz. tanım dosyası dahsboard için görüntü adı, yetki gibi özellikleri belirlemekte kullanılmaktadır.

Tanım dosyası örnek formata uygun olmalı, __type bilgisi örnekteki gibi kullanılmalıdır. Açıklama satırı içermemeli, kullanılmayacak özellikler içeriğinden silinmelidir.

Code Block

language	js
title	MyDashboard.jSettings

{
    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\\MyDashboard.html"

Code Block

language	xml
title	MyDashboard.html

<!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">
			.....
		</div>
	</body>
</html>

Sorgu Görünümü hazırlama

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.

Code Block

language	js
title	MyQueryResult.jSettings

{
    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.

Code Block

language	xml
title	MyQueryResult.html

<!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.

Doküman liste sonuçlarını düzenleme

Listedeki jquery olaylarını yakalayarak template değiştirme, data manupliasyon yapabilirsiniz. Bu yolla mevcut html geliştirmedeki özellikleri koruyarak sadece sonuçların görünümünü değiştirebilirsiniz.

GUI_DLVOnStarting : Doküman listesi için istek yapılmadan önce tetiklenen olaydır.
GUI_DLVOnStartRender : Doküman listesi alındıktan sonra tetiklenen olaydır.
GUI_DLVOnEndRender : Tüm işlemler tamamlandıktan sonra tetiklenen olaydır.

Olaylara parametre olarak iletilen nesne üzerine Template değiştirebilirsiniz. nesneye Cancel=true değeri ekleyerek çalışmayı durdurabilir, tüm işlemleri ele alabilirsiniz. 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.

Arayüzde dokümanlar birden fazla yerde listelenebilmektedir. Ana ekranda soru sonuçları, dokümana tıklandığında sağda benzer kopya dokümanlar gösterilmektedir. tamamı aynı eventi kullanmaktadır. sağdaki alanlar için args.Options.RenderSub değeri true gelmektedir. ihtiyaç halinde özelleştirilecek bölge için args.targetDom değeride kontrol edilebilir.

Code Block

<script>
$(document.body).on("GUI_DLVOnStartRender",function(e,args) {
	if(!args.Options.RenderSub)  //benzer dokümanlar gibi özel liste alanları için RenderSub değeri true yapılmaktadır. 
	{
		args.Template="<d:r data='data'><div>{{ data.DisplayName }} </div></d:r>";
	}
})
</script>

TemplateSelector değerini değiştirerek her veri için farklı şablon kullanılmasını sağlayabilirsiniz.

...

Child pages (Children Display)

Versions Compared

Old Version 8

New Version 9

Key

Html eklenti yazma

Dashboard hazırlama

Sorgu Görünümü hazırlama

Doküman liste sonuçlarını düzenleme

Page Comparison

Versions Compared

Old Version 8

New Version 9

Key

Html eklenti yazma

Dashboard hazırlama

Sorgu Görünümü hazırlama

Doküman liste sonuçlarını düzenleme