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
We use cookies on this site to enhance your user experience
By using this site, you are agreeing to allow us to collect and use cookies as outlined in Alfresco’s Cookie Statement and Terms of Use (and you have a legitimate interest in Alfresco and our products, authorizing us to contact you in such methods). If you are not ok with these terms, please do not use this website.