Hello Members,
I have created a process inside that, I'm using a custom stencil to create a new option (TypeAheadMultiSelect Field). The process is saved properly with no error or warning. But While publishing an app or application I'm getting an error called [App definition could not be saved].
I'm using Alfresco Process Service Version 6.
Stencil Code:
<!DOCTYPE html>
<html>
<head>
<style>
*{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
input{
outline: none;
border: none;
}
.multi-selector{
width: max-content;
}
.select-field{
border: 1px solid rgb(187, 187, 187);
}
.select-field,.task,.listtt{
width: 100%;
background-color: white;
padding: 0.3rem;
}
.listtt{
box-shadow: 0 30px 60px rgb(0,0,0,0.2);
display: none;
}
.down-arrow{
font-size: 1.2rem;
display: inline-block;
cursor: pointer;
transition: 0.2s linear;
}
.task{
display: block;
padding-left: 0;
}
.task span{
float: right;
font-size: 0.6rem;
padding-top: 6px;
}
.task:hover{
background-color: aliceblue;
}
.show{
display: block;
}
.rotate180{
transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="multi-selector">
<div class="select-field">
<input type="text" name=""
placeholder="Choose tasks"
id="selectTask" class="input-selector">
<span class="down-arrow">▾</span>
</div>
<div class="listtt" >
</div>
</div>
<script>
document.querySelector('.down-arrow').addEventListener('click',()=>{
document.querySelector('.listtt').classList.toggle('show');
document.querySelector('.down-arrow').classList.toggle('rotate180');
console.log('checkondown')
});
var data=[];
async function fetchData(){
.then((response)=> response.json())
.then((dataRead)=>{
data=[];
dataRead.map((x)=> {
data.push({
"name":x.name.common,
"value":false
})
});
console.log(data);
loadList(data);
});
}
const list = document.querySelector(".listtt");
const explore = document.querySelector(".input-selector");
window.addEventListener("DOMContentLoaded", fetchData);
explore.addEventListener("input", filter);
var fields = [];
function onCheck(event){
let onCheckEvent = data.find(item=>item.name==event.target.id);
onCheckEvent.value=event.target.checked;
console.log(onCheckEvent);
fields.push(onCheckEvent)
console.log(fields);
}
function loadList() {
let temp = "";
data.forEach((item, i)=>{
temp+=`<label class="task"> <input type="checkbox" name="" id="${item.name}">${item.name} </label>`;
});
list.innerHTML = temp;
data.forEach((item, i)=>{
let checkbox = document.getElementById(`${item.name}`);
checkbox.addEventListener('change', onCheck);
});
}
function filter(e) {
let temp = '';
const result = data.filter(item=> item.name.toLowerCase().includes(e.target.value.toLowerCase()));
if(result.length>0){
result.forEach((item, i)=>{
temp+=`<label class="task"> <input type="checkbox" name="" id="${item.name}">${item.name} </label>`;
})
}else{
temp =" ";
}
list.innerHTML =temp;
data.forEach((item, i)=>{
let checkbox = document.getElementById(`${item.name}`);
if(checkbox){
checkbox.checked = item.value;
checkbox.addEventListener('change', onCheck);}
});
}
</script>
</body>
</html>
Below are some attachment you can see.
It will be very benifical for the community, if someone solve the issue regarding stencil.
Thank you,
Amey
