diff --git a/ccp/fragment.html b/ccp/fragment.html
new file mode 100644
index 0000000..c54deac
--- /dev/null
+++ b/ccp/fragment.html
@@ -0,0 +1,73 @@
+
\ No newline at end of file
diff --git a/ccp/js/methodlistcontroller.js b/ccp/js/methodlistcontroller.js
new file mode 100644
index 0000000..df6de62
--- /dev/null
+++ b/ccp/js/methodlistcontroller.js
@@ -0,0 +1,104 @@
+class CCPMethodList extends HTMLElement{
+
+ #boot;
+ #rootdoc;
+ #data;
+ #filtered;
+
+ #url = "http://localhost:8080/ccp/fragment.html"
+ //#url = "http://d4science-cdn-public:8984/resources/ccp/fragment.html"
+
+ constructor(){
+ super()
+ this.#boot = document.querySelector("d4s-boot-2")
+ this.#rootdoc = this.attachShadow({ "mode" : "open"})
+ this.fetchMarkup()
+ }
+
+ fetchMarkup(){
+ return fetch(this.#url).then(
+ (reply)=>{
+ if(reply.status === 200){
+ return reply.text()
+ }else{ throw new Exception("Unable to fetch markup") }
+ }).then(data=>{
+ this.#rootdoc.innerHTML = data
+ console.log(this.#boot)
+ this.fetchProcesses()
+ }).catch(err=>{
+ console.error(err)
+ })
+ }
+
+ connectedCallback(){
+ //this.#boot.whenReady(()=>{ this.fetchMethods() })
+ //window.setTimeout(()=>this.fetchMethods(), 1000)
+ }
+
+ fetchProcesses(){
+ this.#boot.service("http://localhost:8080/processes", "GET", { limit : 1000}, (resp)=>this.showList(resp), ()=>{ alert("You are not allowed list CCP methods") })
+ }
+
+ showList(resp){
+ this.#data = JSON.parse(resp)
+ this.enableSearch()
+ this.updateList()
+ }
+
+ updateList(filter){
+ if(filter === "" || filter == null || filter == undefined){
+ this.#filtered = []
+ }else{
+ const f = filter.toLowerCase()
+ this.#filtered = this.#data["processes"].filter(d=>{
+ return false ||
+ (d.title.toLowerCase().indexOf(f) !== -1)||
+ (d.description.indexOf(f) !== -1) ||
+ (d.keywords.map(k=>k.toLowerCase()).indexOf(f) !== -1)
+ })
+ }
+ BSS.apply(this.#process_list_bss, this.#rootdoc)
+ }
+
+ enableSearch(){
+ const search = this.#rootdoc.querySelector("input[name=search]")
+ search.addEventListener("input", ev=>{
+ this.updateList(ev.currentTarget.value)
+ })
+ }
+
+ #process_list_bss = {
+ "template" : "#PROCESS_LIST_TEMPLATE",
+ "target" : "ul[name=process_list]",
+ "in" : this,
+ "recurse" : [
+ {
+ "target" : "li",
+ "in" : (e,d)=>this.#filtered,
+ "recurse" : [
+ {
+ "target" : "b",
+ "apply" : (e,d)=>{ e.textContent = d.title }
+ },
+ {
+ "target" : "i",
+ "apply" : (e,d)=>{ e.textContent = d.description }
+ },
+ {
+ "target" : "ul",
+ "recurse" : {
+ "target" : "li",
+ "in" : (e,d)=>d.keywords,
+ "apply" : (e,d)=>{
+ e.alt = e.title = e.textContent = d
+ }
+ }
+ }
+ ]
+ }
+ ]
+ }
+
+}
+
+window.customElements.define('d4s-ccp-methodlist', CCPMethodList);
\ No newline at end of file