Topic
  • 5 replies
  • Latest Post - ‏2017-03-07T22:58:24Z by TRI-T
TRI-T
TRI-T
2 Posts

Pinned topic triplat-ds-search-input - Sample Source Code?

‏2017-03-07T00:51:08Z | polymer triplat-ds-search-input

Hi,

I watched the video from 10.5.2 videos from Raphael on triplat-ds-search-input, but I could not entirely follow it. I'm new with TRIRIGA UX, and would like to play around with this feature. I tried to follow as closely as I could, but I seem to get the following issue:

As you can see, it gets stuck on loading results (expecting 2 records to show as there are 2 people records with name that has "Hui").

 

Currently, snippets of my codes can be seen here related to <triplat-ds-search-input>:

 

I noticed that the [[appendFilters]] is actually an empty array, is that supposed to be?

 

Would greatly appreciate any help!

 

edit- Would there be any sample source codes uploaded for our reference?

 

-Tony

Updated on 2017-03-07T02:27:29Z at 2017-03-07T02:27:29Z by TRI-T
  • Raphael_Monroe_Marcondes
    8 Posts
    ACCEPTED ANSWER

    Re: triplat-ds-search-input - Sample Source Code?

    ‏2017-03-07T14:56:10Z  

    Hello Tony, 

    I'm glad to hear you're following our TTEC Videos. That's the best way to start learning TRIRIGA UX. Keep that up =)

    So, regarding your question, I can see some issues with your code. Would you mind changing it and replying if that works?
     

    1 - triplat-ds / triplat-query

    You don't need the data property in our triplat-query. You'd need that in cases you're using triplat-query outside of triplat-ds (Take a look at the doc page to get more info about it).
    So, your 1st snippet should be like:

    <triplat-ds id="peopleDS" name="peopleDS" data="{{peopleDS}}">
        <triplat-query append-filters="[[appendFilters]]"></triplat-query>
    </triplat-ds>
    

    2- triplat-ds-search-input

    You don't need the data property here as well. It is needed for the triplat-search-input (w/o -ds-) but not for the triplat-ds-search-input. So, go ahead and remove data="{{peopleDs}}" in your 2nd snippet. The remaining code is pretty correct.

     

    3- Aliases object

    Your aliases object looks good. Have you created the 3 datasources you are referring to (peopleNameHeader, peopleTitleHeader, peopleOrgHeader) ? They should be created through UX Datasource Builders. Are you familiar with it? They need to be created so that the triplat-ds-search-input will use them to get data for each header (That's why we no longer need the data property 'cause the aliases is now doing the job of pointing which datasource should be used for retrieving records)

  • mpospisil
    mpospisil
    3 Posts
    ACCEPTED ANSWER

    Re: triplat-ds-search-input - Sample Source Code?

    ‏2017-03-07T18:22:21Z  

    Hi Tony,

     

    Two things I did notice about your code though that still don't look right...

     

    1. The 'aliases' object you define needs to be within the 'Properties' section of Polymer. This is likely why your aliases variable is undefined.

     

     

    2. In the triplat-ds-search-input component, the 'aliases' property should be filled in with "{{aliases}}" and not _aliases (no underscore. That is only the local variable in the function).

     

    Hope that helps get it working.

     

    Michael

     

    Updated on 2017-03-07T18:30:31Z at 2017-03-07T18:30:31Z by mpospisil
  • Raphael_Monroe_Marcondes
    8 Posts

    Re: triplat-ds-search-input - Sample Source Code?

    ‏2017-03-07T14:56:10Z  

    Hello Tony, 

    I'm glad to hear you're following our TTEC Videos. That's the best way to start learning TRIRIGA UX. Keep that up =)

    So, regarding your question, I can see some issues with your code. Would you mind changing it and replying if that works?
     

    1 - triplat-ds / triplat-query

    You don't need the data property in our triplat-query. You'd need that in cases you're using triplat-query outside of triplat-ds (Take a look at the doc page to get more info about it).
    So, your 1st snippet should be like:

    <triplat-ds id="peopleDS" name="peopleDS" data="{{peopleDS}}">
        <triplat-query append-filters="[[appendFilters]]"></triplat-query>
    </triplat-ds>
    

    2- triplat-ds-search-input

    You don't need the data property here as well. It is needed for the triplat-search-input (w/o -ds-) but not for the triplat-ds-search-input. So, go ahead and remove data="{{peopleDs}}" in your 2nd snippet. The remaining code is pretty correct.

     

    3- Aliases object

    Your aliases object looks good. Have you created the 3 datasources you are referring to (peopleNameHeader, peopleTitleHeader, peopleOrgHeader) ? They should be created through UX Datasource Builders. Are you familiar with it? They need to be created so that the triplat-ds-search-input will use them to get data for each header (That's why we no longer need the data property 'cause the aliases is now doing the job of pointing which datasource should be used for retrieving records)

  • mpospisil
    mpospisil
    3 Posts

    Re: triplat-ds-search-input - Sample Source Code?

    ‏2017-03-07T18:22:21Z  

    Hi Tony,

     

    Two things I did notice about your code though that still don't look right...

     

    1. The 'aliases' object you define needs to be within the 'Properties' section of Polymer. This is likely why your aliases variable is undefined.

     

     

    2. In the triplat-ds-search-input component, the 'aliases' property should be filled in with "{{aliases}}" and not _aliases (no underscore. That is only the local variable in the function).

     

    Hope that helps get it working.

     

    Michael

     

    Updated on 2017-03-07T18:30:31Z at 2017-03-07T18:30:31Z by mpospisil
  • Raphael_Monroe_Marcondes
    8 Posts

    Re: triplat-ds-search-input - Sample Source Code?

    ‏2017-03-07T18:35:45Z  
    • mpospisil
    • ‏2017-03-07T18:22:21Z

    Hi Tony,

     

    Two things I did notice about your code though that still don't look right...

     

    1. The 'aliases' object you define needs to be within the 'Properties' section of Polymer. This is likely why your aliases variable is undefined.

     

     

    2. In the triplat-ds-search-input component, the 'aliases' property should be filled in with "{{aliases}}" and not _aliases (no underscore. That is only the local variable in the function).

     

    Hope that helps get it working.

     

    Michael

     

    Nice catch  @mpospisil!

    I haven't noticed the aliases was defined outside. Hence, the wrongly set _aliases (should be aliases - no underscore).​

    So,  @TRI-T, can you please try adding​  @mpospisil 's suggestions as well?​

  • mpospisil
    mpospisil
    3 Posts

    Re: triplat-ds-search-input - Sample Source Code?

    ‏2017-03-07T20:07:21Z  

    Nice catch  @mpospisil!

    I haven't noticed the aliases was defined outside. Hence, the wrongly set _aliases (should be aliases - no underscore).​

    So,  @TRI-T, can you please try adding​  @mpospisil 's suggestions as well?​

    Hi Raphael,

     

    one thing I did notice is that when I am using multiple aliases and select records from more than one section (last name and first name), then the filter on the original datasource combines those with an AND operator.

     

    For example, if I search for "bil" and I select "John Billings" (matches on last name) and "Billy Smith" (matches on first name), then I'm not seeing any results in the list original datasource since it's trying to find people with last name "Billings" and first name "Billy" (which does not exist).

     

    How can I specify an OR operator? Or what am I doing wrong?

     

    Thanks.

  • TRI-T
    TRI-T
    2 Posts

    Re: triplat-ds-search-input - Sample Source Code?

    ‏2017-03-07T22:58:24Z  
    • mpospisil
    • ‏2017-03-07T20:07:21Z

    Hi Raphael,

     

    one thing I did notice is that when I am using multiple aliases and select records from more than one section (last name and first name), then the filter on the original datasource combines those with an AND operator.

     

    For example, if I search for "bil" and I select "John Billings" (matches on last name) and "Billy Smith" (matches on first name), then I'm not seeing any results in the list original datasource since it's trying to find people with last name "Billings" and first name "Billy" (which does not exist).

     

    How can I specify an OR operator? Or what am I doing wrong?

     

    Thanks.

    Hi Raphael and Michael,

    Thank you to both of you, my <triplat-ds-search-input> is now working!

    So what I did was:

    1) Removed the data elements in both <triplat-query> and <triplat-ds-search-input> as per suggestion from Raphael.

    2) Changed the data binding from {{_aliases}} to {{aliases}} in the <triplat-ds-search-input> tag as per suggestion from Michael.

    3) Added the properties tag in the Polymer Script.

     

    See code snippets for final working code for others' references:

    <triplat-ds>

    <triplat-ds id="peopleDS" name="peopleDS">
            <triplat-query append-filters="[[appendFilters]]" data="{{peopleDS}}">
            </triplat-query>
    </triplat-ds>
    

    <triplat-ds-search-input>

    <triplat-ds-search-input id="searchField"
            class="flex"
            placeholder="Search People"
            aliases=
    "{{aliases}}"
            max-header-children="3"
            append-filters="{{appendFilters}}"
            search-icon-precede>
    </triplat-ds-search-input>
    

    Polymer Properties

    properties: {
            aliases: {
                    type: Object,
                    value: function() {
                            var _aliases = {};
                            _aliases["name"] = {alias: "Full Name", datasource: "peopleNameHeader"};
                            _aliases["title"] = {alias: "Title", datasource: "peopleTitleHeader"};
                            _aliases["organisation"] = {alias: "Organisation", datasource: "peopleOrgHeader"};
                            return _aliases;
                    }
            }    
    },
    

    -Tony

    Updated on 2017-03-07T23:01:42Z at 2017-03-07T23:01:42Z by TRI-T