Template ile arama sonucu gösterimi

Owned by Özgür Balcı
Last updated: Oct 17, 2019
2 min read

GEODI rest api servisleri sağlamaktadır. Sorgu servislerinden yararlanarak sorgu sonuçlarını uygulamanızda kullanabilirsiniz. Sonuçları GeodiQueryJS ile istediğiniz formatta gösterebileceğiniz gibi Angular.js Vue.js gibi kütüphanelerden de yararlanabilirsiniz.

(warning) Standart veya Basit api kullanımına göre bir Token, Geodi Proje adı ve Geodi URL'e bilgisine sahip olmalısınız.


GeodiQueryJS

GeudiQueryJS.js kütüphanesini projenize dahil edip şablon belirleyerek sorgu sonuçlarını uygulamanızda gösterebilirsiniz. Template tanımlama şekli Angular, Vue.js gibi araçlar ile aynıdır.  Şablon  içerisinde kullanabileceğiniz nesne özelliklerini örnekleri çalıştırdığınız tarayıcının debug konsolundan veya Geodi Query API - Doküman Arama servis dokümanından öğrenebilirsiniz.

  • data.DisplayName değerini göstermek için HTML şablon içeriğinde {{ data.DisplayName }} ifadesi kullanılmalıdır. 
  • Döngü ve koşullar için d:r tag ve data/visible attribute değerleri kullanılabilir. 
    • data : döngüde dolaşılacak veriyi belirlemekte kullanılır. Şablonun başlangıcında data değeri gelen sonuçların listesidir. data belirtilen her d:r tag içeriğinde data gezilen değere dönüşür. ihtiyaç halinde döngü dışındaki içeriğe data.parentdata ile erişilebilir.
      • Örnekler
        • <d:r data="[0,1,2,3]">-{{data}}- </d:r> 
        • <d:r data="data"><d:r data=data.AditionalValues>{{data}} </d:r> </d:r>
    • visible: koşul geçerli ise d:r alanı gösterilir. geçerli değilse içerik yok sayılır. data ile birlikte kullanılmasa dahi içinde blunduğu blok içeriksenki veri ile bir defa kontrol edilir. döngüdeki her item için kontrol yapılacaksa içeri bir d:r elementi daha oluşturulmalıdır.
    • Örnekler
      • <d:r data="[0,1,2,3]"> <d:r visible="data>2"> -{{data}}- </d:r> </d:r> 
  • Encode/decode işlemleri için HttpUtility yardımcı sınıfı kullanılabilir.

(warning) Şablon içinde kullanılan nesnenin özelliklerine ulaşmak için şablon içerisinde {{  debugger; }} ifadesi kullanıp konsol üzerinden data ve context nesnelerini  inceleyebilirsiniz.

Hazır şablonlar

GeodiQuery.js hazır şablon tanımı içermektedir. Herhangi bir şablon tanımlamadan sonuç elde edebilirsiniz.

Örnek HTML
<script src="https://servis2.dece.com.tr/GUI/js/GeodiQueryJS.js"></script>
<div id=MyQueryResultArea></div>
<script>
 	var q = new GeodiQuery();
    q.wsName = "...";//wsName
    q.EndIndex = 8;
    q.ServerUrl = "...";// Server Url
    q.Token = "...";//Token
    q.SearchString = "";//Search Text
    q.UseRank = true;
	RenderDLV({ Query: q, TargetDiv: "#MyQueryResultArea" } )
</script>

Örnek Şablon ve Kullanımı


Örnek Şablon
<script type="dece-template" id=MyTemplate>
	<div>
		{{data.length}} item : <br>
		<ul>
			<d:r data="data">
				<li title="{{data.AdditionalValues.Date}}">{{ data.DisplayName }} ( {{ data.MyMethod() }})</li>
			</d:r>
		</ul>
	</div>
</div>


Örnek HTML
<script src="https://servis2.dece.com.tr/GUI/js/GeodiQueryJS.js"></script>
<div id=MyQueryResultArea></div>
<script>
 	var q = new GeodiQuery();
    q.wsName = "...";//wsName
    q.EndIndex = 8;
    q.ServerUrl = "...";// Server Url
    q.Token = "...";//Token
    q.SearchString = "";//Search Text
    q.UseRank = true;
	RenderDLV(
				{ 
					Query: q, 
					TargetDiv: "#MyQueryResultArea", 
					Template: $("#MyTemplate"),
					OnStarting: function(args) { //before rest api call
						//...
					},
					OnStartRender: function() { //after rest api call, before render
						$.each(args.Data,function(i,d) { d.MyMethod=function() {return "SAMPLE";} });
					},
					OnEndRender: function(args) { // after render
						//...
					}
				} 
		)
	//$("#MyTemplate") yerine $("#MyTemplate").html() veya string ifade iletilebilir.
</script>


Daha fazla örnek için aşağıdaki canlı demo projelerimiz üzerinden çalışan aşağıdaki örneği incelyebilirsiniz. Misafir kullanıcı için alınmış token kullanılmaktadır.

Örnek koda  https://github.com/decesw/html/blob/master/DocumentQuery/Query_GeodiQueryJS.html adresinden erişebilirsiniz.


Template düzenlemeyi deneyebileceğiniz örnek arayüz için tıklayınız. 

Angular.js, Vue.js gibi araçların kullanımı

Rest api sonuçları template render destekleyen herhangi bir kütüphaneye verilebilir. Sorgu servislerinden elde edilecek JSON kütüphanenin istediği şekilde kullanılarak sonuçlar gösterilebilir. Bu konudaki tüm çalışabilir durumdaki örneklere https://github.com/decesw/html/tree/master/DocumentQuery adresinden ulaşabilirsiniz. Örnekler canlı demo projelerimiz üzerinden çalıştırılmaktadır. Misafir kullanıcı için alınmış token kullanılmaktadır.