How to enable popups

[gopidesupavan]

Hi ,

Please help me on this, i have scenario where the user clicks button then i should be able to popup new window from the iframe window .how to achieve this please help me

Thanka, Pavan

[bobpskier]

Can you describe the use case a bit further? I'm going to assume the button is part of a response card returned from Lex. When the user clicks the button, the value of the button will be sent back to Lex as the users next message. Lex will process the input and return a response. This response will be displayed by the lex-web-ui.

During response processing, the lex-web-ui will generate an event that the parent component can consume. For example, the parent component could catch this event and perform further processing such as updating the src for an iframe on the parent page or replacing contents within a div on the parent page.

For example the following jQuery based .on event processing can be used to capture this event on the parent page.

$(document).on('updatelexstate', function onUpdateLexState(evt) {
...
}

The event contains a detail object with information that can be used to affect the parent. See below for some of the data.

var slots = {};
var dialogState = {};
var intentName = '';
var sessionAttributes = {};
var responseCard = {};
if (evt && ('detail' in evt) && evt.detail && ('state' in evt.detail)) {
  slots = evt.detail.state.slots;
  dialogState = evt.detail.state.dialogState;
  intentName = evt.detail.state.intentName || intentName;
  sessionAttributes = evt.detail.state.sessionAttributes || sessionAttributes;
  responseCard = evt.detail.state.responseCard || responseCard;
  if (sessionAttributes.appContext) {
  ...
  }

You can use this method to identify when a button is being displayed as it will be present in the responseCard or alternatively after the button has been clicked and then processed based on some attribute returned in the sessionAttributes or in sessionAttributes.appContext if Lex/Lambda based handling sets an attribute.

[gopidesupavan]

hi bob thanks for responding.below is the my use case.

assume i have done all the conversations user to bot for booking car and finally i want to give payment option for user to do. when user clicks response card button (pay now) then popup i want to add for payment in the iframe. here in the bot conversation page only i want add popup functionality for payment please explain how to achieve this

[bobpskier]

Is the payment processing dialog interacting with the Lex Bot or something external to the bot? Will the dialog be sending in messages to the Bot to complete payment.

I tend to think the better approach is to display a dialog from the parent page based on handling the event from the lex-web-ui after the pay now button has been clicked. This approach would use the event processing I described to initiate display of the dialog. The dialog could be presented via a framework you are accustomed to using from the parent page.

If you really want to handle the payment dialog in the same iframe was the lex-web-ui, it will require building a new Vue component for this dialog, then modifying the response card button handling in (lex-web-ui/src/components/ResponseCard.vue) to initiate display of the new Vue component on click of a button with a specific label/value. You'll also need to implement functions in the new Vue component to handle payment completion functions, etc.

[gopidesupavan]

Hi Bob payment is going to external. if I use my custom javascript to handle my payment page. Where I can write my code in the iframe html page. Please explain.

[bobpskier]

The lex-web-ui is a Vue based component that controls the page in the iframe. To add or extend the functionality of this page in the iframe you will need to use Vue and Vuetify. See vuejs.org. ResponseCard is a component defined by lex-web-ui in in Vue. If you are trying to pop up a new dialog in the iframe, define a new Component in Vue. A Vue component contains an html template, javascript to response to actions in the template, and css. This component would be activated from a ResponseCard button based on a certain button being clicked.

This is not the approach I'd attempt if you plan on using the lex-web-ui embedded in an iframe. Instead of the above, it is easier to popup the dialog from the parent of the lex-web-ui by catching the event generated when a button is pressed. You have complete control from the parent page. You get to pick the javascript framework to use, the style used, the javascript loaded, etc.

In the examples generated by the lex-web-ui, the parent.html hosts the lex-web-ui in an iframe. The parent page loads the lex-web-ui and configures the lex-web-ui. The parent page can be modified to respond to the events from the lex-web-ui. Place your dialog, javascript, etc in parent.html. Activate the logic when an updatelexstate event with the correct attribute(s) is detected. Close the dialog when complete.

If you are using the lex-web-ui in full page mode where it is the only content presented on the page (no iframe involved) you will need to follow the approach of modifying the Vue components.

[gopidesupavan]

when i make changes in responsecard.vue this not reflecting i even restarted the server

{{responseCard.title}}

{{responseCard.subTitle}} {{button.text}} Click following

in the above i changed the order(title, subtitle its not reflect can you please tell how to replicate

[gopidesupavan]

getting following error while doing npm run build-dist

throw new RemovedPluginError(errorMessage); ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. at Object.get [as UglifyJsPlugin] (D:\lexworkspace\aws-lex-web-ui-master\lex-web-ui\node_modules\webpack\lib\webpack.js:189:10) at Object. (D:\lexworkspace\aws-lex-web-ui-master\lex-web-ui\build\webpack.dist.conf.js:23:24) at Module._compile (internal/modules/cjs/loader.js:956:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10) at Module.load (internal/modules/cjs/loader.js:812:32) at Function.Module._load (internal/modules/cjs/loader.js:724:14) at Module.require (internal/modules/cjs/loader.js:849:19) at require (internal/modules/cjs/helpers.js:74:18) at Object. (D:\lexworkspace\aws-lex-web-ui-master\lex-web-ui\build\build-dist.js:12:27) at Module._compile (internal/modules/cjs/loader.js:956:30)

[bobpskier]

Let’s get your local development environment setup to perform builds.

Can you give the following a try?

Make sure your local system is running nodejs 10.16.1 and npm 6.13.1.

If you have not setup an existing deployment of lex-web-ui use the launch stack button from the blog post. This sets up the resources you’ll use below. If you have set up a lex-web-ui continue.

Create a new folder to test in and clone the lex-web-ui GitHub repo.

mkdir source
cd source
git clone https://github.com/aws-samples/aws-lex-web-ui.git

Then modify three fields in aws-lex-web-ui/src/config/lex-web-ui-loader-config.json to match

"cognito": {
    "poolId": "fill in with your cognito identity pool id",
...
},
  "lex": {
    "botName": "fill in with your bot name”,
...
}

Then execute the following

cd aws-lex-web-ui
npm install
cd lex-web-ui
npm install
cd ../build
./release.sh
cd ..
npm start

This should fire up a web server on localhost on port 8000. Test with your browser against localhost:8000.

You should be able to modify ResponseCard.vue and observe changes.

release.sh will rebuild as well.

[gopidesupavan]

i did as above after changing in the ResponseCard.vue .i am not finding any changes. I moved the subtitle position below image url.

<v-card-media v-if="responseCard.imageUrl" v-bind:src="responseCard.imageUrl" contain height="33vh"

{{responseCard.subTitle}}

and even i tried to execute the npm run bulid-dist its giving the following error

Source\aws-lex-web-ui\lex-web-ui\build>npm run build-dist

lex-web-ui@0.14.9 build-dist D:\Source\aws-lex-web-ui\lex-web-ui node build/build-dist.js

To use this template, you must update following to modules:

node: 10.16.1 should be >= 10.16.3

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! lex-web-ui@0.14.9 build-dist: node build/build-dist.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the lex-web-ui@0.14.9 build-dist script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! \AppData\Roaming\npm-cache_logs\2019-12-01T21_18_02_866Z-debug.log

Source\aws-lex-web-ui\lex-web-ui\build>

[gopidesupavan]

i tried executing with upgraded 10.16.3 and 10.17.0 its giving the following log

\aws-lex-web-ui\lex-web-ui\node_modules\webpack\lib\webpack.js:189 throw new RemovedPluginError(errorMessage); ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. at Object.get [as UglifyJsPlugin] (D:\Source\aws-lex-web-ui\lex-web-ui\node_modules\webpack\lib\webpack.js:189:10) at Object. (D:\Source\aws-lex-web-ui\lex-web-ui\build\webpack.prod.conf.js:34:26) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object. (D:\Source\aws-lex-web-ui\lex-web-ui\build\build.js:11:21) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Function.Module.runMain (internal/modules/cjs/loader.js:831:12) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! lex-web-ui@0.14.9 build: node build/build.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the lex-web-ui@0.14.9 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[tomjames19]

@gopidesupavan just checking have you been able to solve this issue or is the build still failing?