Skip to Content
Technical Articles
Author's profile photo Ahmed Esmat
Ahmed Esmat
June 18, 2021 7 minute read

IBM Watson Assistant Chatbot for UI5 Application : Step-by-step guide

IBM Watson Assistant is an AI-powered virtual agent that provides customers with fast, consistent and accurate answers across any messaging platform, application, device or channel. Using artificial intelligence and natural language processing, Watson Assistant learns from customer conversations, improving its ability to resolve issues the first time .

The following diagram describes the user experience where the channel is our app :

Image Source :IBM

I am using IBM Cloud account which is offering many services , The account is free and provides access to everything you need to develop, track, plan, and deploy apps .

You can create one from here :https://cloud.ibm.com/login

This blog will introduce you to addIBM Watson Assistant chatbotfor yourSAP UI5Application where this app will look like a basic home page .
这篇文章的第一部分将创建chatbot service that will interact with the user with basic Inquiries and the second part will be creating our UI5 application .

1: Create the Assistant service

Login to the IBM Cloud. On the dashboard, click buttonCreate Resource, Click on Services from the left bar ( There is a lot of services that everyone has it’s own functionality ) , ChooseAI / Machine Learningand ClickWatson Assistant. We will use the Lite free plan.

Scroll to changeClick onCreate

After the service is created ,Launch

In this simple scenario we won’t dig into all the service details ,We will just make the bot responds to user with his Company HR & IT contact details .We will start by creating bot skills ( bot training phase ) .

2: Create a Dialog Skill

Adialog skillis a container for the artifacts that define the flow of a conversation that your assistant can have with your customers where Actions skill ( Compose step-by-step flows for any range of simple or complex conversations ) is still in its beta versions .

ClickAdd an actions or dialog skill .

Choose it’s Name , language and type we stated then ClickCreate Skill.

3: Create Intent & Dialogs

The Intents page is where you start to train your assistant. You can add training data that was built by IBM to your skill. Prebuilt intents are available from the content catalog, But in this tutorial we will create our own intents.

ClickCreate Intent

Now we will Enter Intent Name that match user question , In this step We will addUser examplesreferring to HR contact details like the following .

Repeat the same steps for IT contact details intent like the following .

A dialog defines the flow of your conversation in the form of a logic tree. It matches intents (what users say) to responses (what your virtual assistant says back). Each node of the tree has a condition that triggers it, based on user input.

From the Skills menu, chooseDialogand ClickAdd nodeto state the intents we created before responses .

Under “If assistant recognizes” , Put HR Intent & EnterAssistant respondstext with its details .
I have put two contacts for example .

Repeat the same steps for IT contact details dialog .

We can test it to see the results by clickingTry it:

Enter “HR” in the chat & See the results .

It’s working as expected ,It answered with the HR contact .

4:Integrating web chat

Now We need to add this widget into our UI5 app , So we will need the widget credentials

On the left bar , Click onAssistantsand chooseWatson Assistantthat we created before then Scroll and In the right ClickIntegrate web chat.

Choose

After it’s created , You can customize it’s style from Style tab .

Now ClickEmbedand copy the following script that we will use later in our app .

5: Create SAPUI5 App

I am using in this blogSAP Web IDE however it’s recommended to useSAP Business Application Studio.

Create New SAPUI5 Application

After the project is created . Navigate toProject name > webapp > index.html我们复制和粘贴脚本在最后step to look like the following :

     Homepage
Navigate to your view and We will add a few tiles ( Static & Dynamic ) to make the basic view for user home page .
controllerName = " HomepageHomepage.control < mvc:视图ler.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:layout="sap.ui.layout" xmlns:microchart="sap.suite.ui.microchart">      <layout:HorizontalLayout allowWrapping="true"> <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Profit Margin" subheader="Expenses" press="onPress"> <TileContent unit="EGP" footer="Daily"> <NumericContent scale="M" value="1.2" valueColor="Error" indicator="Up" withMargin="false"/> </TileContent> </GenericTile> <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop" header="Productivity" subheader="Progress"> <tileContent> <TileContent> <content> <NumericContent scale="%" value="95" icon="sap-icon://s4hana"/> </content> </TileContent> </tileContent> </GenericTile> <SlideTile class="sapUiTinyMarginBegin sapUiTinyMarginTop" transitionTime="250" displayTime="2500"> <GenericTile backgroundImage="https://raw.githubusercontent.com/SAP/ui5-tooling/master/docs/images/UI5_logo_wide.png" frameType="TwoByOne" press="onPress"> <TileContent footer="June 21, 2021"> <NewsContent contentText="SAP UI5 New Articles" subheader="News"/> </TileContent> </GenericTile> <GenericTile backgroundImage="https://experience.sap.com/fiori-design-web/wp-content/uploads/sites/5/2016/06/composition_launchpad-homepage-V1.30-1.36-1100x554.png" frameType="TwoByOne" > <TileContent footer="June 21, 2021"> <NewsContent contentText="SAP Fiori New Features" subheader="Today, SAP News"/> </TileContent> </GenericTile> </SlideTile> </layout:HorizontalLayout> </layout:VerticalLayout> </Page> </pages> </App> </mvc:View></code></pre>
               </div>
               <p>We can run the application , It will look like the following where chatbot is displayed at the bottom & The tiles we created at the top :</p>
               <p style="overflow: hidden;margin-bottom: 0px"><img class="aligncenter ds-lightbox__img" decoding="async" src="//www.bouseh.com/wp-content/uploads/2021/06/u-2-1.png" alt="" data-index="18" data-id="plbox-1354705"></p>
               <p>We can test the widget across the app by typing “I need to contact HR” & “IT” and let’s see the result .</p>
               <p style="overflow: hidden;margin-bottom: 0px"><img class="aligncenter ds-lightbox__img" decoding="async" src="//www.bouseh.com/wp-content/uploads/2021/06/U-4.png" alt="" data-index="19" data-id="plbox-1354705"></p>
               <p></p>
               <h3><strong>Conclusion:</strong></h3>
               <p>By leveraging machine learning and NLP, AI-powered chatbots can understand the intent behind your user’s requests and respond to their questions in a natural, human way.</p>
               <p>In this blog , I introduced you to use one of this chatbots in a user friendly app . By creating a simple UI5 homepage that contains Watson Assistant widget with it’s basic functionally that can be used for SAP Fiori app where the user asks for department contact number and the bot answers it<b>.</b>The widget has a lot more of features that can be used .</p>
               <p>You can find more about this widget :<a href="https://cloud.ibm.com/docs/assistant?topic=assistant-getting-started" target="_blank">here</a></p>
               <p>Feel free to leave your feedback on this post or any questions you may have .</p>
               <p></p>
              </div>
             </div>
             <div class="ds-blog-post__social-side-bar">
              <div class="ds-sticky-on-scroll ">
               <div class="ds-sticky-on-scroll__wrapper  ">
                <div class="ds-sticky-on-scroll__content">
                 <div class="ds-blog-post__social-actions">
                  <button class="sap-button-follow ds-button ds-button--primary ds-blog-post__social-action ds-blog-post__social-action--follow" id="sap-button-follow-hdr-id" onclick="location.href='//www.bouseh.com/wp-login.php?redirect_to=https%3A%2F%2Fwww.bouseh.com%2F2021%2F06%2F18%2Fibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide%2F%3Fs_action%3Dss_change_follow_status%26nonce%3D3f8ae30cda'" rel="IDS_login" type="button" data-content-type="blogpost" data-content-id="1354705" data-nonce="3f8ae30cda" title="Please log into the system to use follow/unfollow functionality."><span class="ds-button-text">Follow</span></button>
                  <button type="button" class="ds-button ds-button--secondary ds-button--icon-button ds-blog-post__social-action likes-post-link dolike " rel="IDS_login" onclick="location.href='//www.bouseh.com/wp-login.php?redirect_to=https%3A%2F%2Fwww.bouseh.com%2F2021%2F06%2F18%2Fibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide%2F%3Fs_action%3Dss_change_like_status%26nonce%3D17af0587a4'" title="Like" data-nonce="17af0587a4" data-post-id="1354705"><i class="ds-icon ds-icon--likes-outline ds-icon--regular ds-m-r-xs" tabindex="-1"></i><span class="ds-button-text">Like</span></button>
                  <button type="button" class="ds-button ds-button--secondary ds-button--icon-button ds-blog-post__social-action" title="RSS Feed" onclick="location.href='//www.bouseh.com/2021/06/18/ibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide/feed/'"><i class="ds-icon ds-icon--rss-feed ds-icon--regular ds-m-r-xs" tabindex="-1"></i>RSS Feed</button>
                 </div>
                </div>
               </div>
              </div>
             </div>
            </div>
            <div class="ds-blog-post__social-row">
             <div class="ds-blog-post__social-icons">
              <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.bouseh.com%2F2021%2F06%2F18%2Fibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide%2F" title="" target="_blank"><span class="ds-social-icon ds-social-icon--dark-facebook"></span></a>
              <a href="https://twitter.com/share?url=https%3A%2F%2Fwww.bouseh.com%2F2021%2F06%2F18%2Fibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide%2F&text=IBM+Watson+Assistant+Chatbot+for+UI5+Application+%3A+Step-by-step+guide" title="" target="_blank"><span class="ds-social-icon ds-social-icon--dark-twitter"></span></a>
              <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.bouseh.com%2F2021%2F06%2F18%2Fibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide%2F&title=IBM+Watson+Assistant+Chatbot+for+UI5+Application+%3A+Step-by-step+guide" title="" target="_blank"><span class="ds-social-icon ds-social-icon--dark-linkedin"></span></a>
             </div>
             <div class="ds-tooltip__wrapper">
              <div class="ds-tooltip__anchor">
               <button type="button" class="ds-button ds-button--secondary ds-blog-post__alert-moderator-button ds-button--disabled" aria-label="Alert Moderator" data-toggle="collapse" data-hide-class="ds-collapse" data-triggers=".alertModerator" aria-expanded="false">Alert Moderator</button>
              </div>
              <div role="tooltip" class="ds-tooltip ds-tooltip--bottom">
               Alerting is not available for unauthorized users</div>
             </div>
            </div>
            <div class="wprc-content-v3">
             <div class="ds-blog-post-form ds-blog-post__alert-moderator-form ds-collapse alertModerator wprc-form-v3" data-toggle="collapseComponent" data-name="alertModerator"></div>
            </div>
           </div>
           <div class="ds-blog-post__right-side-bar ds-flexCol-sm-12 ds-flexCol-md-3">
            <div id="sapassignedtagswidget-v3-2" class="ds-side-bar-widget ds-assigned-tags ds-m-b-l">
             <h3 class="ds-side-bar-widget__heading">Assigned Tags</h3>
            </div>
            <div id="sap-relatedcontent-widget-v3-2" class="ds-side-bar-widget widget_sap-relatedcontent-widget-v3">
             <button type="button" class="ds-side-bar-widget__heading ds-side-bar-widget__heading--collapsible" aria-expanded="true">Similar Blog Posts<i class="ds-icon ds-icon--arrow-up ds-icon--big" tabindex="-1"></i></button>
             <div class="ds-side-bar-widget__content">
              <ul class="ds-relatedContent ds-relatedContent__list" data-types="blogpost" data-limit="3"></ul>
             </div>
            </div>
            <div id="sap-relatedcontent-widget-v3-3" class="ds-side-bar-widget widget_sap-relatedcontent-widget-v3">
             <button type="button" class="ds-side-bar-widget__heading ds-side-bar-widget__heading--collapsible" aria-expanded="true">Related Questions<i class="ds-icon ds-icon--arrow-up ds-icon--big" tabindex="-1"></i></button>
             <div class="ds-side-bar-widget__content">
              <ul class="ds-relatedContent ds-relatedContent__list" data-types="question" data-limit="3"></ul>
             </div>
            </div>
           </div>
          </div>
         </div>
        </div>
       </div>
      </div>
      <div id="content-lightbox-modal" aria-modal="true" aria-label="Lightbox gallery opened" role="dialog" tabindex="-1" class="ds-lightbox" data-id="plbox-1354705">
       <div class="ds-lightbox__box">
        <div class="ds-lightbox__slideNumber">
         <span class="ds-lightbox__slideNumber--current"></span>/<span class="ds-lightbox__slideNumber--total"></span>
        </div>
        <div class="ds-lightbox__header">
         <a href="javascript:void(0);" data-id="plbox-1354705" class="ds-lightbox__headerIcon ds-icon-encoded--close" aria-label="Close lightbox"></a>
        </div>
        <div class="ds-lightbox__content--scrollable ds-lightbox__content">
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/simple-overview.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/1-50.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/2-32.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/4-30.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/6-23.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/7-19.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/8-22.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/10-15.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/11-17.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/12-2-2.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/13-10.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/14-13.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/15-8.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/16-6.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/17-6.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/18-3.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/u1-1.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/u-2-1.png" alt="">
         </div>
         <div class="ds-lightbox__slide">
          <img class="ds-lightbox__slide--img" src="//www.bouseh.com/wp-content/uploads/2021/06/U-4.png" alt="">
         </div>
         <a class="lightbox-gallery-button--prev ds-lightbox__gallery-button ds-icon ds-icon--arrow-left" href="javascript:void(0);" aria-label="Show previous image"></a>
         <a class="ds-lightbox__gallery-button lightbox-gallery-button--next ds-icon ds-icon--arrow-right" href="javascript:void(0);" aria-label="Show next image"></a>
        </div>
        <div class="zoom-buttons">
         <a class="ds-lightbox__zoom-out" href="javascript:void(0);" aria-label="Enter to zoom out"><i class="ds-icon ds-icon--minus"></i></a>
         <a class="ds-lightbox__zoom-in" href="javascript:void(0);" aria-label="Enter to zoom in"><i class="ds-icon ds-icon--plus"></i></a>
        </div>
       </div>
      </div>
      <div class="ds-blog-post__comment-section">
       <div class="ds-flexGrid">
        <div class="ds-flexRow">
         <div class="ds-flexCol-12 ds-flexCol-md-10 ds-flexCol-lg-10">
          <div id="comments" class="ds-blog-post-comments">
           <div class="ds-blog-post-comments__counter" title="Number of Comments">
            3 Comments</div>
           <div class="dm-section dm-align-center dm-section-header__title" title="Please log on to comment" aria-role="alert">
            You must be<a href="//www.bouseh.com/wp-login.php?redirect_to=2021/06/18/ibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide" class="opener js-idspopup" rel="IDS_login" title="Logged on">Logged on</a>to comment or reply to a post.</div>
           <div class="ds-blog-post-comments__list">
            <div class="comment byuser comment-author-karimelsayed even thread-even depth-1 ds-blog-post-comment" id="li-comment-577178">
             <div id="comment-577178" class="ds-blog-post-comment__wrapper">
              <div class="ds-blog-post-comment__header">
               <a class="ds-blog-post-comment__avatar" target="_blank" rel="noopener noreferrer" href="https://people.sap.com/karim.elsayed"><img alt="Author's profile photo Karim Mohamed" src="https://avatars.services.sap.com/images/karim.elsayed_small.png" class="avatar avatar-48 photo ds-avatar-component ds-avatar-component--small" height="48" width="48"></a>
               <div class="ds-blog-post-comment__meta-info">
                <div class="ds-user ds-blog-post-comment__author">
                 <a target="_blank" aria-label="Author name Karim Mohamed" href="https://people.sap.com/karim.elsayed" rel="external nofollow" class="ds-link ds-user__name ">Karim Mohamed</a>
                </div>
                <span class="ds-blog-post-comment__date"><time datetime="2021-06-20T13:42:43+00:00">June 20, 2021 at 1:42 pm</time></span>
               </div>
              </div>
              <div class="ds-blog-post-comment__body">
               <div class="ds-blog-post-comment__content ds-editor-content">
                <p>Excellent esmat very informative</p>
               </div>
               <div id="comment-actions-577178" class="comment-actions ds-blog-post-comment__actions">
                <ul class="ds-content-actionbar ds-actionbar--links" role="menubar" aria-label="action menu">
                 <!-- render like, reply, edit, delete links -->
                 <li class="ds-content-actionbar__item"><span class="ds-link ds-button--link ds-content-actionbar__link ds-button--disabled">
                   <div class="ds-button__inner-container " id="nbLikeComment_577178" tabindex="-1">
                    Like 1</div></span></li>
                 <li class="ds-content-actionbar__item">
                  <div class="ds-tooltip__wrapper">
                   <div class="ds-tooltip__anchor">
                    <a class="ds-link ds-button--link ds-content-actionbar__link" href="//www.bouseh.com/2021/06/18/ibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide/">Share</a>
                   </div>
                   <div role="tooltip" class="ds-tooltip ds-tooltip--bottom">
                    Right click and copy the link to share this comment</div>
                  </div></li>
                </ul>
                <div class="ds-actionbar--forms"></div>
               </div>
              </div>
             </div>
            </div>
            <!-- #comment-## -->
            <div class="comment byuser comment-author-ielsayed odd alt thread-odd thread-alt depth-1 ds-blog-post-comment" id="li-comment-577360">
             <div id="comment-577360" class="ds-blog-post-comment__wrapper">
              <div class="ds-blog-post-comment__header">
               <a class="ds-blog-post-comment__avatar" target="_blank" rel="noopener noreferrer" href="https://people.sap.com/i.elsayed"><img alt="Author's profile photo Ismail ElSayed" src="https://avatars.services.sap.com/images/i.elsayed_small.png" class="avatar avatar-48 photo ds-avatar-component ds-avatar-component--small" height="48" width="48"></a>
               <div class="ds-blog-post-comment__meta-info">
                <div class="ds-user ds-blog-post-comment__author">
                 <a target="_blank" aria-label="Author name Ismail ElSayed" href="https://people.sap.com/i.elsayed" rel="external nofollow" class="ds-link ds-user__name ">Ismail ElSayed</a>
                </div>
                <span class="ds-blog-post-comment__date"><time datetime="2021-06-21T23:35:11+00:00">June 21, 2021 at 11:35 pm</time></span>
               </div>
              </div>
              <div class="ds-blog-post-comment__body">
               <div class="ds-blog-post-comment__content ds-editor-content">
                <p>Great job Esmat (Y) (Y)</p>
               </div>
               <div id="comment-actions-577360" class="comment-actions ds-blog-post-comment__actions">
                <ul class="ds-content-actionbar ds-actionbar--links" role="menubar" aria-label="action menu">
                 <!-- render like, reply, edit, delete links -->
                 <li class="ds-content-actionbar__item"><span class="ds-link ds-button--link ds-content-actionbar__link ds-button--disabled">
                   <div class="ds-button__inner-container " id="nbLikeComment_577360" tabindex="-1">
                    Like 1</div></span></li>
                 <li class="ds-content-actionbar__item">
                  <div class="ds-tooltip__wrapper">
                   <div class="ds-tooltip__anchor">
                    <a class="ds-link ds-button--link ds-content-actionbar__link" href="//www.bouseh.com/2021/06/18/ibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide/">Share</a>
                   </div>
                   <div role="tooltip" class="ds-tooltip ds-tooltip--bottom">
                    Right click and copy the link to share this comment</div>
                  </div></li>
                </ul>
                <div class="ds-actionbar--forms"></div>
               </div>
              </div>
             </div>
            </div>
            <!-- #comment-## -->
            <div class="comment byuser comment-author-alaanaguib even thread-even depth-1 ds-blog-post-comment" id="li-comment-578044">
             <div id="comment-578044" class="ds-blog-post-comment__wrapper">
              <div class="ds-blog-post-comment__header">
               <a class="ds-blog-post-comment__avatar" target="_blank" rel="noopener noreferrer" href="https://people.sap.com/alaa.naguib"><img alt="Author's profile photo Alaa Naguib" src="https://avatars.services.sap.com/images/alaa.naguib_small.png" class="avatar avatar-48 photo ds-avatar-component ds-avatar-component--small" height="48" width="48"></a>
               <div class="ds-blog-post-comment__meta-info">
                <div class="ds-user ds-blog-post-comment__author">
                 <a target="_blank" aria-label="Author name Alaa Naguib" href="https://people.sap.com/alaa.naguib" rel="external nofollow" class="ds-link ds-user__name ">Alaa Naguib</a>
                </div>
                <span class="ds-blog-post-comment__date"><time datetime="2021-06-24T14:42:14+00:00">June 24, 2021 at 2:42 pm</time></span>
               </div>
              </div>
              <div class="ds-blog-post-comment__body">
               <div class="ds-blog-post-comment__content ds-editor-content">
                <p>Good Idea<strong>Essmat</strong></p>
               </div>
               <div id="comment-actions-578044" class="comment-actions ds-blog-post-comment__actions">
                <ul class="ds-content-actionbar ds-actionbar--links" role="menubar" aria-label="action menu">
                 <!-- render like, reply, edit, delete links -->
                 <li class="ds-content-actionbar__item"><span class="ds-link ds-button--link ds-content-actionbar__link ds-button--disabled">
                   <div class="ds-button__inner-container " id="nbLikeComment_578044" tabindex="-1">
                    Like 1</div></span></li>
                 <li class="ds-content-actionbar__item">
                  <div class="ds-tooltip__wrapper">
                   <div class="ds-tooltip__anchor">
                    <a class="ds-link ds-button--link ds-content-actionbar__link" href="//www.bouseh.com/2021/06/18/ibm-watson-assistant-chatbot-for-ui5-application-step-by-step-guide/">Share</a>
                   </div>
                   <div role="tooltip" class="ds-tooltip ds-tooltip--bottom">
                    Right click and copy the link to share this comment</div>
                  </div></li>
                </ul>
                <div class="ds-actionbar--forms"></div>
               </div>
              </div>
             </div>
            </div>
            <!-- #comment-## -->
           </div>
           <!-- main comments content area -->
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    <!-- #main -->
    <div id="shared_footer" class="dm-container dm-wrapper">
     <footer class="dm-footer">
      <div class="dm-footer__inner-wrapper">
       <div class="dm-socialmedia">
        <h5 class="dm-socialmedia__headline" id="hl-sharefollow">Find us on</h5>
        <ul class="dm-socialmedia__links" aria-labelledby="hl-sharefollow">
         <li><a href="https://www.facebook.com/sapcommunity" title=""><span class="dm-icon-encoded--facebook"></span></a></li>
         <li><a href="https://twitter.com/SAPCommunity" title=""><span class="dm-icon-encoded--twitter"></span></a></li>
         <li><a href="https://www.youtube.com/c/SAPCommunities" title=""><span class="dm-icon-encoded--youtube"></span></a></li>
         <li><a href="https://www.linkedin.com/company/sap" title=""><span class="dm-icon-encoded--linkedin"></span></a></li>
         <li><a href="https://instagram.com/sap/" title=""><span class="dm-icon-encoded--instagram"></span></a></li>
         <li><a href="http://www.slideshare.net/SAP" title=""><span class="dm-icon-encoded--slideshare"></span></a></li>
         <li><a href="mailto:?subject='SAP Community'" title=""><span class="dm-icon-encoded--email"></span></a></li>
        </ul>
       </div>
       <nav role="navigation" class="dm-footer__navigation">
        <ul class="dm-footer__navigation__list" aria-label="footer navigation">
         <li><a href="https://community.sap.com/resources/sap-community-privacy-statement" target="_blank">Privacy</a></li>
         <li><a href="http://sap.com/corporate/en/legal/terms-of-use.html" target="_blank">Terms of Use</a></li>
         <li><a href="http://sap.com/about/legal/impressum.html" target="_blank">Legal Disclosure</a></li>
         <li><a href="http://sap.com/about/legal/copyright.html" target="_blank">Copyright</a></li>
         <li><a href="http://sap.com/about/legal/trademark.html" target="_blank">Trademark</a></li>
         <li id="teconsent"></li>
         <li><a href="https://www.sap.com/cmp/nl/sap-community-voice/index.html" target="_blank">Newsletter</a></li>
         <li><a href="https://community.sap.com/support" target="_blank">支持</a></li>
        </ul>
       </nav>
      </div>
     </footer>
    </div>
   </div>
   <!-- #page -->
   <div id="wp-load_tinymce-wrap" class="wp-core-ui wp-editor-wrap tmce-active">
    <link rel="stylesheet" id="dashicons-css" href="//www.bouseh.com/res1dx-583/wp-includes/css/dashicons.min.css" type="text/css" media="all">
    <link rel="stylesheet" id="editor-buttons-css" href="//www.bouseh.com/res1dx-583/wp-includes/css/editor.min.css" type="text/css" media="all">
    <style>#wp-load_tinymce-wrap {display:none;}</style>
    <div id="wp-load_tinymce-editor-tools" class="wp-editor-tools hide-if-no-js">
     <div class="wp-editor-tabs">
      <button type="button" id="load_tinymce-tmce" class="wp-switch-editor switch-tmce" data-wp-editor-id="load_tinymce">Visual</button>
      <button type="button" id="load_tinymce-html" class="wp-switch-editor switch-html" data-wp-editor-id="load_tinymce">Text</button>
     </div>
    </div>
    <div id="wp-load_tinymce-editor-container" class="wp-editor-container">
     <div id="qt_load_tinymce_toolbar" class="quicktags-toolbar"></div>
     <textarea class="wp-editor-area" rows="20" autocomplete="off" cols="40" name="load_tinymce" id="load_tinymce"></textarea>
    </div>
   </div>
   <link rel="preload" href="//www.bouseh.com/wp-includes/js/tinymce/skins/lightgray/skin.min.css?wp-mce-49110-20201110" as="style">
   <link rel="preload" href="//www.bouseh.com/wp-includes/js/tinymce/plugins/codesample/css/prism.css" as="style">
   <link rel="preload" href="//www.bouseh.com/wp-includes/js/tinymce/skins/lightgray/content.min.css?wp-mce-49110-20201110" as="style">
   <div id="wp-link-backdrop" style="display: none"></div>
   <div id="wp-link-wrap" class="wp-core-ui" style="display: none" role="dialog" aria-labelledby="link-modal-title">
    <form id="wp-link" tabindex="-1">
     <input type="hidden" id="_ajax_linking_nonce" name="_ajax_linking_nonce" value="a93be0843e">
     <h3 id="link-modal-title">Insert/edit link</h3>
     <button type="button" id="wp-link-close"><span class="screen-reader-text">Close</span></button>
     <div id="link-selector">
      <div id="link-options">
       <p class="howto" id="wplink-enter-url">Enter the destination URL</p>
       <div>
        <label><span>URL</span><input id="wp-link-url" type="text" aria-describedby="wplink-enter-url"></label>
       </div>
       <div class="wp-link-text-field">
        <label><span>Link Text</span><input id="wp-link-text" type="text"></label>
       </div>
       <div class="link-target">
        <label><span></span><input type="checkbox" id="wp-link-target">Open link in a new tab</label>
       </div>
      </div>
      <p class="howto" id="wplink-link-existing-content">Or link to existing content</p>
      <div id="search-panel">
       <div class="link-search-wrapper">
        <label><span class="search-label">Search</span><input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" aria-describedby="wplink-link-existing-content"><span class="spinner"></span></label>
       </div>
       <div id="search-results" class="query-results" tabindex="0">
        <ul></ul>
        <div class="river-waiting">
         <span class="spinner"></span>
        </div>
       </div>
       <div id="most-recent-results" class="query-results" tabindex="0">
        <div class="query-notice" id="query-notice-message">
         <em class="query-notice-default">No search term specified. Showing recent items.</em>
         <em class="query-notice-hint screen-reader-text">Search or use up and down arrow keys to select an item.</em>
        </div>
        <ul></ul>
        <div class="river-waiting">
         <span class="spinner"></span>
        </div>
       </div>
      </div>
     </div>
     <div class="submitbox">
      <div id="wp-link-cancel">
       <button type="button" class="button">Cancel</button>
      </div>
      <div id="wp-link-update">
       <input type="submit" value="Add Link" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
      </div>
     </div>
    </form>
   </div>
  </div>
  <!-- .page-wrapper -->
 </body>
</html>