The formal documentation for all the Web Client APIs is available in GitHub, plus a new tutorial, Let Your Web App Interact with Your Chatbot. |
window.sap.cai.webclient
onPressMessage: function (evt) {
var oView = this.getView(),
myinput = oView.byId("messageText");
window.sao.cai.webclient.show();
window.sap.cai.webclient.sendMessage(myinput.getValue());
},
setTheme
method, you will need to supply the formal theme name (e.g., sap_belize
). I created a data model so I could load the themes in a Select box for the user. I believe the below list are supported, but there may be more and, of course, it will likely change over time.var themes = {
"themes": [
{
"name": "SAP Belize",
"theme": "sap_belize"
},
{
"name": "SAP Belize High Contrast Black",
"theme": "sap_belize_hcb"
},
{
"name": "SAP Belize High Contrast White",
"theme": "sap_belize_hcw"
},
{
"name": "SAP Quartz",
"theme": "sap_fiori_3"
},
{
"name": "SAP Quartz Dark",
"theme": "sap_fiori_3_dark"
},
{
"name": "SAP Quartz High Contrast White",
"theme": "sap_fiori_3_hcw"
},
{
"name": "SAP Quartz High Contrast Black",
"theme": "sap_fiori_3_hcb"
},
{
"name": "SAP Horizon",
"theme": "sap_horizon"
},
{
"name": "SAP Horizon Experimental",
"theme": "sap_horizon_exp"
}
]
};
var oModel = new JSONModel(themes);
this.getView().setModel(oModel, "themes");
window.sapcai.webclientBridge
const webclientBridge = {
onMessage: (payload) => {
payload.messages.forEach(element => {
if (element.participant.isBot) {
if (element.attachment.content.text.startsWith("SENDING AVATAR")) {
profile = element.attachment.content.text.substring(19);
window.sapcai.webclientBridge.imageeditor.setSrc("https://avatars.services.sap.com/images/" + profile + ".png")
}
}
});
},
}
window.sapcai = {
webclientBridge,
}
In my skill, when I'm ready to send data to my app, I can create a Client Data message:
elements
, in the order they were sent.onMessage: (payload) => {
payload.messages.map(message => {
if (message.attachment.type == 'client_data') {
let action = message.attachment.content.elements[0].value
if (action == "zoom") {
zoom(message.attachment.content.elements[1].value);
} else if (action == "move") {
let location = message.attachment.content.elements[1].value
setCenter(location.lat, location.lng);
}
}
});
}
zoom
and setCenter
are methods that encapsulate a call to the Google Maps API.You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
11 | |
10 | |
9 | |
7 | |
7 | |
7 | |
7 | |
6 | |
5 |