Reply To: Smart Card View

[yavordashew]

Hi paul,
Glad to hear that the suggestions have worked!
I would like to answer you question regarding the window field values and replacing the smart-input elements with a drop-down instead.
The code snippet below which is pretty self explаnatory will give you example how to achieve both things.

    onOpen($event: CustomEvent) {
        // event handling code goes here.
        const window = document.querySelector('smart-window')
        let allInputValues = window.querySelectorAll('smart-input')
        for(let i = 0; i < allInputValues.length; i++){
            console.log(allInputValues[i].getAttribute('value'))
        }
        if (($event.target as Element).classList.contains('smart-card-view')) {
            window.footerTemplate = 'footerTemplateDelete'
            let dropdownContainer: Element = window.querySelector('smart-input'),
                inputValue = dropdownContainer.getAttribute('value'),
                dropdown = document.createElement('smart-drop-down-list');
            dropdown.value = inputValue;
            dropdown.placeholder = inputValue;
            let dropdownDataSource: string[] = [
                "Your Dropdwon List Item 1 ",
                "Your Dropdwon List Item 2",
                "Your Dropdwon List Item 3",
                "Your Dropdwon List Item 4"
            ];
            dropdown.dataSource = dropdownDataSource
            dropdownContainer.replaceWith(dropdown)
            let id = parseFloat(window.label[0])
            let deleteBtn = document.getElementById('deleteButton')
            deleteBtn.addEventListener('click', () => {
                window.close()
                this.removeRecord(id)
            })
        }
    }

And one additional thing is to add the following CSS styles in order the drop-down element to match the styles of the other input elements in the window.

.smart-drop-down-list{
    width: 100%;
    --smart-surface: white;
}

Let me know if that works for you.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/