Step 10: Highlight named items

In an app with a multimodal UX, it is always a good idea to accompany voice commands with visual effects in the app. Let’s highlight the named items in the app. To do this, we will send another command from the dialog script to the app.

1. In the dialog script, update the voice commands for adding and removing items with the highlightItem command:

   Dialog script

   const itemList = "pepperoni, margherita, burrito, burger, taco, apple pie";
   
   intent(`(I want|I will take|Add) $(NUM: 1, 2, 3...) $(ITEM: ${itemList}), please-`, p => {
       p.play(`Adding ${p.ITEM.value} for you`);
       let number = p.NUM ? p.NUM.value : 1;
       p.play({command: 'updateOrder', item: p.ITEM.value, quantity: number});
       p.play({command: 'highlightItem', item: p.ITEM.value});
   });
   
   intent(`Remove $(NUM: 1, 2, 3...) $(ITEM: ${itemList}), please-`, p => {
       p.play(`Removing ${p.ITEM.value}`);
       let number = p.NUM ? p.NUM.value : 1;
       p.play({command: 'updateOrder', item: p.ITEM.value, quantity: -number});
               p.play({command: 'highlightItem', item: p.ITEM.value});
   });
   

2. To the app, add the highlight() function. This function will change the border color around the item and get back to the initial color after a timeout:

   HTML file

   function highlight(item){
       const el = document.getElementById(item.replace(/\s+/g, '-'));
       if (el) {
           el.style.border = "1px solid #22CBFF";
           setTimeout(() => {
               el.style.border = "1px solid #C6C3C3";
           }, 1000);
       }
   }
   

3. Update the onCommand handler to call the highlight() function when highlightItem is received:

   HTML file

   <script>
       var alanBtnInstance = alanBtn({
           key: "e2fecaef4cb07cbe7d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage",
   
           // Handling the highlightItem command
           onCommand: function (commandData) {
               if (commandData.command == "updateOrder") {
                   changeOrder(commandData.item, commandData.quantity);
               } else if (commandData.command == "highlightItem") {
                   highlight(commandData.item);
               }
           },
           rootEl: document.getElementById("alan-btn"),
       });
   </script>
   

In the app, try adding and removing items with voice and make sure they get highlighted when named.