This topic contains 11 replies, has 2 voices, and was last updated by Avatar Yavor Dashev 4 months, 2 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #101709
    Avatar
    paul
    Participant

    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

    #101711
    Avatar
    Yavor Dashev
    Participant

    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/

    #101712
    Avatar
    paul
    Participant

    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”>

    #101714
    Avatar
    Yavor Dashev
    Participant

    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/

    #101732
    Avatar
    paul
    Participant

    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.

     

     

    #101735
    Avatar
    Yavor Dashev
    Participant

    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/

    #101741
    Avatar
    paul
    Participant

    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

    #101743
    Avatar
    Yavor Dashev
    Participant

    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/

    #101764
    Avatar
    paul
    Participant

    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.

    #101768
    Avatar
    Yavor Dashev
    Participant

    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/

    #101771
    Avatar
    paul
    Participant

    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

    #101781
    Avatar
    Yavor Dashev
    Participant

    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/

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.