Реализация кастомного инпута с тэгами в Appsmith

На сегодняшний день Appsmith не имеет готового решения с выбором тэгов внутри инпута. Есть решение — Tagger.

Необходимо поместить Custom widget в рабочую область и перейти в режим редактирования. После этого вносим в табы следующие строки кода:

HTML (подключаем скрипт и стили для библиотеки Tagger)

<script src="https://unpkg.com/@jcubic/[email protected]/tagger.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@jcubic/[email protected]/tagger.css">

<div class="tagContainer"> 
<div class="label">Tags</div>
<input type="text" value="First tag" name="tags"/>
</div>

Style (кастомизируем UI на свой вкус)

.label{
  font-family: montserrat;
  color: #4C5664;
  font-size: 0.9rem;
  margin: 0px 0px 10px
}
.tagContainer{
  padding: 10px
}
.tagger {
  border-radius: var(--appsmith-theme-borderRadius);
}
.tagger .tagger-new {
    width: 1px;
}
.tagger > ul > li:not(.tagger-new) > :first-child {
  background-color: var(--appsmith-theme-primaryColor);
    border-color: #4C5664 !important
}
.tagger > ul > li:not(.tagger-new) > :first-child a, span {
  color: var(--appsmith-theme-backgroundColor) !important;
}

JavaScript (реализуем добавление тэгов)

var input = document.querySelector('[name="tags"]');
appsmith.onReady(() => {

  var tags = tagger(input, {
    allow_duplicates: false,
    allow_spaces: true,
    wrap: true,
    completion: {
        list: appsmith.model.tags
    }
});

input.addEventListener('input', () => {
  appsmith.updateModel({selectedTags:input.value})
});
  appsmith.updateModel({selectedTags:input.value})
});

Результат

Теперь можно добавлять и удалять неограниченное количество тэгов

Энэйтэн Эппсмитов