Digital Assistant and Mobile

Get Involved. Join the Conversation.

Topic

    Geetha Devi
    how to print the values form custom component as a link in...
    Topic posted October 18, 2019 by Geetha DeviBlue Ribbon: 750+ Points, tagged API, Bots, Conversational AI, Messaging, Mobile, OMCE, Slack, Virtual Assistant, VPA, WeChat 
    57 Views, 12 Comments
    Title:
    how to print the values form custom component as a link in skill ODA?
    Summary:
    I would to print value coming from custom component as link
    Content:

    My requirement is to print the output from the custom component as a link.

    Below out I am getting from the custom API. I would like to show each line as a link.

    2019-10-21 to 2019-10-27 (29 hrs)

     2019-07-08 to 2019-07-14 (.5 hrs)

    2019-07-01 to 2019-07-07 (1.4 hrs)

    Below YAML to print  this output

      Print:
        component: "System.List"
        properties:
          options: "${Name}" #output from custom component.
          prompt: "Below are the details "
        transitions: 
          return: "done"

    Here in this attachment considering all output as a link. I would print each line as link

    Could anyone please help us?

     

    Image:

    Comment

     

    • Mayank Thakore

      One way to do thist is to use CommonResponse Component (CRC) -as in;

        showLinks:
          component: "System.CommonResponse"
          properties:
            processUserMessage: false
            keepTurn: true
            metadata:
              responseItems:
              - type: "text"
                text: "Below are the details:"
                footerText: "Footer text."
                name: "linkvar"
                separateBubbles: false
                actions:
                - label: "2019-10-21 to 2019-10-27 (29 hrs)"
                  type: "url"
                  payload:
                    url: "https://cloud.oracle.com/digital-assistant"
                - label: "2019-07-08 to 2019-07-14 (.5 hrs)"
                  type: "url"
                  payload:
                    url: "https://www.oracle.com/"  
                - label: "2019-07-01 to 2019-07-07 (1.4 hrs)"
                  type: "url"
                  payload:
                    url: "https://www.oracle.com/"                
          transitions:
            return: "done"

      (replace url values)

      replace strings ("2019-10-21 to 2019-10-27 (29 hrs)", etc), with values you received from custom component.

      • Geetha Devi

        Thanks Mayank for your valuable replay..

        The "${Name}" is output comming from the custom component.

        Custom code

        =========

          invoke: (req, mobileSDK, conversation, done) => {
                try {
        for (var i = 0; i < datafilter.length; i++) {
            console.finest("======inside the for loop =====");       
        var Timedetails = Timedetails + datafilter.DATA_DS.G_1[i].START_TIME[0]+" to "+datafilter.DATA_DS.G_1[i].STOP_TIME[0]+" "+"("+datafilter.DATA_DS.G_1[i].RECORDED_HOURS[0]+" "+"hrs"+")"+"\n";   
         }
        conversation.variable('Name', Timedetails);
         conversation.keepTurn(true);
         conversation.transition();
         done();
        }
        ouput
        ====
        2019-10-21 to 2019-10-27 (29 hrs)
        2019-07-08 to 2019-07-14 (.5 hrs)
        2019-07-01 to 2019-07-07 (1.4 hrs)
        How to treat each line of output as prompt the user with a list optioncomponenet itself?
         
         
        • Mayank Thakore

          If your Custom Component is not using MessageModel (as Frank suggested) and using BotML (as I suggested), then you need to plug-in the -label values you received from Custom Component in above code I provided.

          It is, most of the times, good practice to massage data you are sending from Custom Component to BotML (yaml), such a that, data is easy to use in BotML Here I suggest to separate each date record with a delimiter ( e.g. ',' ) and then in BotML use FTL (Freemarker Template Language) to separate it in -label value. Or you can pass javascript array object (e.g. data.date1 = "2019-10-21 to 2019-10-27 (29 hrs)" etc..) and then use it in BotML (e.g. ${data.value.date1} etc..).

    • Frank Nimphius

      Hi,

      actually Mayank gave you the best hint for this. You can either use a System.CommonResponse component (in which case you write the list of links from a custom component to a variable in the skill (conversation.variable("variable name", arrayOfUrls));

      or you use the MessageModel to create your own list. conversation.MessageModel()

      See:  slides 22 and 26 -> https://fnimphiu.github.io/OracleTechExchange/trainings/completetraining_v2/04/04_03_Custom_Components_SDK_1019.pdf

      Frank

      • Geetha Devi

        Thanks, Frank for your replay.

        The "${Name}" is output coming from the custom component.

        Custom code

        =========

          invoke: (req, mobileSDK, conversation, done) => {
                try {
        for (var i = 0; i < datafilter.length; i++) {
            console.finest("======inside the for loop =====");       
        var Timedetails = Timedetails + datafilter.DATA_DS.G_1[i].START_TIME[0]+" to "+datafilter.DATA_DS.G_1[i].STOP_TIME[0]+" "+"("+datafilter.DATA_DS.G_1[i].RECORDED_HOURS[0]+" "+"hrs"+")"+"\n";    
         }
        conversation.variable('Name', Timedetails);
         conversation.keepTurn(true);
         conversation.transition();
         done();
        }
        ouput
        ====
        2019-10-21 to 2019-10-27 (29 hrs)
        2019-07-08 to 2019-07-14 (.5 hrs)
        2019-07-01 to 2019-07-07 (1.4 hrs)
        How to treat each line of output as prompt the user list option ?
        • Geetha Devi

          Frank, could you please help me with this?

          • Frank Nimphius

            Hi,

            you would create an Array of strings. So instead of sending strings separated by \n you use an array

             

            var myarray = [] ;

             

            loop ...

              myarray.push(string)

             

            Then you call 

            conversation.variable('Name', myarray);

            You can now use the System.CommonResponse component. Use the System.CommonResponse component "itaretorVariable" property and reference "Name" as its value. You can now print a list of postback actions as URL similar to this tutorial (Which prints postback actions as buttons)

            https://docs.oracle.com/en/cloud/paas/digital-assistant/tutorial-cr-components/index.html#AddSelectListResponses

             

            Frank

             

            • Geetha Devi

              Hi Frank,

              Thanks for your valuable replay.

              I have the with System.CommonResponse Component. but the value of array value is not print as system list in Dailogflow.

              YAML

              =====

              printresult:
                  component: "System.CommonResponse"
                  properties:
                    processUserMessage: true
                    keepTurn: false
                    nlpResultVariable: "iResult"
                    metadata: 
                      responseItems:         
                      - type: "text"  
                        text: "Below test"
                        actions:
                        - label: "${Name.value}"
                          type: "postback"            
                          payload:
                            action: "select"
                            variables:              
                              timecard: "${Name.value}"                
                          iteratorVariable: "Name"           
                  transitions:
                    next: "done"

              customcode

              =====

              var tJsonArray = [];
                                          for (var i = 0i < datafilter.lengthi++) {
                                              console.finest("======inside the for loop =====");
               
                                             var data = data + datafilter.DATA_DS.G_1[i].START_TIME[0] + " to " + datafilter.DATA_DS.G_1[i].STOP_TIME[0] + " " + "(" + datafilter.DATA_DS.G_1[i].RECORDED_HOURS[0] + " " + "hrs" + ")" ;
               
                                              tJsonArray.push(data);
                                          }
                                          
                                          conversation.variable('Name'tJsonArray);

               

    • Geetha Devi

       

      Hi Mayank / Frank,

      Thank you for your valuable comments. I got the output as expected.

      using the System.CommonResponse

      component: "System.CommonResponse"
          properties:
            processUserMessage: true
            keepTurn: false
            nlpResultVariable: "iResult"
            maxPrompts:
            metadata: 
              responseItems:         
              - type: "text"  
                text: "Timecard Details "
                actions:
                - label : "${Names.StartTime} to ${Names.StopTime} ${Names.hours}"
                  type: "postback"
                  payload:
                    variables:
                      action: "select" 
                      Timecardid: "${Names.TimeCardID}"
                
                  iteratorVariable: "Names"
          transitions:
            actions:
              select:                "getTimePrjhrs"

       

       

    • Frank Nimphius

      Hi,

      you use Apache FreeMarker (https://freemarker.apache.org/docs/ref_builtins.html)

       

      ${Names.StartTime?long?number_to_date?string['dd.MM.yyyy, HH:mm']

      Frank

      • Geetha Devi

        I have tried with ${Names.StartTime?long?number_to_date?string['dd.MM.yyyy, HH:mm'] but  nort working.

        ${Names.StartTime} is object  in array .

        Could you please help on this?