Smart Card View

[paul]

I am trying to use smart-card-view (on angular), but I have 3 issues:
1. icons are not displayed: { label: ‘PetName’, dataField: ‘petName, icon: ‘petName’ }
2. I want to add a button on edit card (delete button). I wonder why it doesn’t already exist.
3. How can I get event from edit card when a user click on ‘Ok/Save’ or ‘Cancel’ ?
Thanks

[yavordashew]

Hi paul,
Thank you for contacting us!
Let me answer your enquiries:
1. Can you share a code example of this case, because I was unable to reproduce this case.Also check the console for errors.
2. You can use the footerTemplate property of the smart-window to overwrite the default one and create custom one. I
have prepared a little code example on how to achieve this. I used the event ‘open’ of the smart-card-view.
More about the footerTemplate you can check in the smart-window API here :https://www.htmlelements.com/docs/window-api/
//In you JS File:

window.onload = function ( ){
    const cardview = document.querySelector('smart-card-view');
        cardview.addEventListener('open', function (event) {
        const window = document.querySelector('smart-window')
        window.footerTemplate = 'footerTemplate'
        let id = parseFloat(window.label[0])
        let deleteBtn= document.getElementById('deleteButton')
        deleteBtn.addEventListener('click', () =>{
          window.close()
          removeRecord(id)
        })
    });
    function removeRecord(id){
        cardview.removeRecord(id-1)
      }
}

And in your HTML file:

    <smart-card-view id="cardView"></smart-card-view>
    <template id='footerTemplate'>
        <smart-button id ='deleteButton'> Delete</smart-button>
      </template>

Note that I have used this demo for base : https://www.htmlelements.com/demos/cardview/deferred-scroll/
3.This on will be similar to the previous one:
//In your JS file:

window.onload = function ( ){
    const cardview = document.querySelector('smart-card-view');
        cardview.addEventListener('open', function (event) {
        const window = document.querySelector('smart-window')
        let okBtn = window.querySelector('.ok .smart-button')
            console.log(okBtn)
        okBtn.addEventListener('click', function (){
            alert(okBtn.textContent)
        })
    })
}

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

[paul]

Thanks for the prompt and quick reply
I used this example: https://www.htmlelements.com/docs/cardview/#angular
The icons are not displayed. No errors in console.
I found this: <div class=”smart-card-view-label icon birthday” data-field=”birthday”>

[yavordashew]

Hi paul,
Thank you for contacting us, again!
After some testing I was able to find out why the icons are not displayed in your project.ViewEncapsulation defines template and style encapsulation options available for component’s.
Just add the following code snippet to you app.componetn.ts file:

import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { CardViewComponent, Smart } from 'smart-webcomponents-angular/cardview';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

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

[paul]

Hi again Yavor,
I followed your example with footerTemplate, but it doesn’t work. I got a window with no buttons (smart-footer is blank).
And another question. How to create different custom buttons on add new card window? (different from edit window).
Thanks.
 
 

[yavordashew]

Hi paul,
Thank you for contacting us, again!
For your fist question I forgot to mention in my previous reply that you have to place the whole template element for the window footer in your
index.html file after <app-root> tag.
And for your second question I have made yet another code snippet similar to the last one but with a little differences and we will need to add another click event to the SmardCardView component.
//In your app.component.html file:

<!-- Note the new click event -->
smart-card-view
(open)="onOpen($event)"
[coverField]="coverField"
(click)="newCardEvent($event)"
[editable]="true"
[titleField]="titleField"
[allowDrag]="true"
[addNewButton]="true"
[dataSource]="dataSource" [columns]="columns" #cardview id="cardView"></smart-card-view>

//In your index.html file:

<!-- Its important to add the templates after <app-root> -->
  <app-root></app-root>
  <template id='footerTemplateDelete'>
    <smart-button id ='deleteButton'> Delete</smart-button>
  </template>
  <template id='footerTemplateNew'>
    <smart-button id ='newBtn'> Your New Button</smart-button>
    <smart-button id ='anotherBtn'> Another Button</smart-button>
  </template>

//In your app.component.ts file:

   onOpen($event:CustomEvent) {
            // event handling code goes here.
        const window = document.querySelector('smart-window')
        if(($event.target as Element).classList.contains('smart-card-view')){
            window.footerTemplate = 'footerTemplateDelete'
            let id = parseFloat(window.label[0])
            let deleteBtn= document.getElementById('deleteButton')
            deleteBtn.addEventListener('click', () =>{
              window.close()
              this.removeRecord(id)
            })
        }
    }
    newCardEvent($event:CustomEvent) {
       // event handling code goes here.
        let targetElement = ($event.target as Element).classList
        const window = document.querySelector('smart-window');
        if(targetElement.contains('smart-add-new-button')){
             window.footerTemplate = 'footerTemplateNew';
             let anotherBtn= document.getElementById('anotherBtn')
             anotherBtn.addEventListener('click', () =>{
               console.log('Another Button in the window footer was clicked')
             })
         }
     }
    removeRecord(id):void{
      console.log(typeof id)
      this.cardview.removeRecord(id-1)
    }
 

I know its a long post but I wanted to be comprehensive as possible.
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/

[paul]

Hi Yavor,
Thanks. It worked like a charm. You’re the best.
I have another questions.

1. I want to get all values from window fields. I tried with:

   Array.from(document.querySelectorAll('smart-input')).forEach((element, index) =>
   {
     const eventFieldType = element.getAttribute('aria-label');
     if (eventFieldType === EVENT_FIELD.TYPE) {
       type = element.value;
     }
     if (eventFieldType === EVENT_FIELD.LOCATION) {
       location = element.value;
     }
     if (eventFieldType === EVENT_FIELD.DESCRIPTION) {
       description = element.value;
     }
   });

   Is that ok or there is a better solution?

2. In your example at smart-card you have on window only input text and date fields. I want a dropdown instead of one input text. How can I do that?

Thanks,
Paul

[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/

[paul]

Hi Yavor,
It worked fine, but now I have two issues.

1. I tried to get date from datePicker. Because I got a timestamp (may I got exactly  format: MM/dd/yyyy?), I tried to format it, but I got current date. I checked on smart-date-time-picker and I found that I have date+time even if I select a date (without time). Maybe here is the issue.
2. I add a checkbox. When I unselect, it remain blue color until I move to another input.

Thanks.

[yavordashew]

Hi paul,
Thank you for contacting us!
For your first question I have another code snippet that worked for me. If it doesn’t for you it will be best to create a code example for us.
1. Code snippet:
//In the onOpen event Handler

    onOpen($event: CustomEvent) {
        // event handling code goes here.
        const window = document.querySelector('smart-window')
        let dateInput = window.querySelectorAll('input')
        console.log(dateInput[2].value)
        // outputed format of the date is MM/DD/YY
        //rest of the function code

And for your second question this is the default functionality of the checkbox but you can use the native method blur() to disable this appearance like so:

    const checkbox = document.getElementById('checkBox')
    checkbox.addEventListener('click', ()=>{
        if(!checkbox.checked){
            checkbox.blur()
        }
     

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/

[paul]

Yavor, it worked great. I really appreciate your help.
I have another issues:

1. I want do not display an input and label from a card. I tried something with formatSettings from columns, but it`s not working. I want this input to be visible only on window.
2. I want to validate a field on window and display a message if an error occur.
3. When I add a new card it is not automatically displayed on smart-card. Only after refresh. I get some data from database.
4. If I have only one card then the width is too big.

Thanks,
Paul

[yavordashew]

Hi Paul,
Thank you for contacting us and excuse me for the late reply.
Here are my suggestions for your questions:
1.I have aa code snippet on how to use the formatFunction:
//In the columns array

        { label: 'First Name', dataField: 'firstName', icon: 'firstName' ,
            formatFunction: function (settings: { value: any; template: string; }) {
                    const value = settings.value;
                    let className='not-visible-input';
                    settings.template = <code><div style=&quot;display:'none';&quot; class=&quot;${className}&quot;>${value}</div></code>;
                }
        },

//And in you app.component.css file add the following class

.not-visible-input{
    display: none;
}

2.Can you give a bit more context what exactly you want to achieve if you want to display alert message you can do so by binding to the ‘change’ event of the input like so:

  dateInput[2][2].addEventListener('change', ()=>{
            // your validation
            alert('Validation error')
        })

3. For this one maybe it will be best to create a code example for us because when I create new card it is displayed and I also advice you to check the following demo: https://www.htmlelements.com/demos/cardview/server-side-crud/
4.And for this one I have another code snippet for you:
//In your app.component.ts file

    ngAfterViewInit() {
        // afterViewInit code.
        this.init();
    }
    init() {
            if(this.dataSource.length <= 1){
                window.onload = () => {
                    let oneCard = document.querySelector('.smart-card') as HTMLElement
                    oneCard.style.width = '30%'
                }
            }
    }

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/

[Author]

Posts