Modifying iframe_sample_app to send and receive messages #64

itirkarp · 2014-10-14T06:12:09Z

Earlier the iframe_sample_app used to display content from an external website (Wikipedia).

/cc @zendesk/quokka

References

Issue Update iFrame Sample App #59

Risks

None

…nt from an external website

tmcinerney · 2014-10-14T21:43:03Z

Did you want us to review this or still WIP?

sandlerr · 2014-10-14T23:37:15Z

iframe_sample_app/app.js

-      if (data.firstLoad && SIDE_BAR_REGEX.test(this.currentLocation())) {
-        this.showIframe({ width: '300px', height: '260px' });
+    handleHello: function(data) {
+      if (data.awesome) {


This might need a comment. I think we had a problem at one point where people thought data.awesome was something we provided

I will be adding in the readme that you need to have the zaf sdk running locally. That is going to be open source so people can see in the code what is being sent in data. Do you think this data.awesome bit will be clear then?

Why do we need to check for data.awesome presence if it's our own data structure? Perhaps it would be better to send something back in the data structure that we can render.

danielbreves · 2014-10-15T00:08:10Z

iframe_sample_app/app.js

+
+      this.$form = this.$('form').eq(0);
+      this.formData = this.$form.serializeArray();
+      var message = this.formData[0].value;


Why not use the input field directly?

Did that for consistency. I looked at how other demo apps are doing similar things with forms

Mmm, do you remember which one by any chance? I'd would personally only do this if I was passing the whole form to be processed by some other code. We should have as little code as possible in these apps, though I know some demo apps are fairly complicated.

It was here: https://github.com/zendesk/demo_apps/blob/master/external_api_sample_app/app.js#L208
But I think it is passing the complete form data, like you said. So I'll simplify it here

danielbreves · 2014-10-15T00:17:51Z

Perhaps it would be nice to have some representation in the UI for the iframe as well. Thoughts @zendesk/quokka?

danielbreves · 2014-10-15T00:24:40Z

@maximeprades @acottrell this sample app depends on a external page that includes ZAF SDK and is able to send and receive any messages it receives. I asked @itirkarp to use the page included in ZAF SDK itself, since we're planning to open source it (soonish I'm hoping). The other alternative would be to host this somewhere, but then App Developers wouldn't be able to change its code, obviously.

danielbreves · 2014-10-15T00:25:41Z

@itirkarp could you make a PR with the changes to ZAF SDK as well?

maximeprades · 2014-10-15T00:28:24Z

@danielbreves as long as we're not making a lot of noise around it and if you make sure security team is aware (follow these steps: https://zendesk.atlassian.net/wiki/display/ENG/Open+Source) i'm ok with open sourcing that repo if you think it's ready.

The only thing is I want to "relaunch" it properly in Q1, with some marketing calories behind it as a brand new feature so that's why I don't want to make noise about it now (i.e blog post etc...)

danielbreves · 2014-10-15T00:32:38Z

@maximeprades awesome! I've added a couple of killer LAB stories that we could use to add even more "calories" for the launch in Q1: LAB-14, LAB-15

maximeprades · 2014-10-15T00:34:36Z

@danielbreves are the URLs final? I remember some discussions around serving them from the CDN for better perf which would result in a URL change and thus breaking apps for people.

danielbreves · 2014-10-15T00:39:40Z

@maximeprades I believe so, we verified it's already being served from the CDN: https://zendesk.atlassian.net/browse/ROAD-173?focusedCommentId=92827&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-92827

maximeprades · 2014-10-15T00:47:32Z

ok what about URLs? are they final? what are they? sorry I suppose i could RTFM 😄

danielbreves · 2014-10-15T00:50:27Z

@maximeprades totally haha -> https://developer.zendesk.com/apps/docs/agent/iframes_in_apps
final is a strong word tough, I don't know, I don't have all the answers!! 🙀

adammw · 2014-10-15T02:47:03Z

iframe_sample_app/README.md


-This app aims to be a good start to learn how to iframe things of different sizes and methods.
+This app aims to be a good start to learn how send messages between an iframe and an app.


, using the [Zendesk App Framework SDK]()?

itirkarp · 2014-10-15T03:06:56Z

@danielbreves
PR for ZAF SDK changes: zendesk/zendesk_app_framework_sdk#21

danielbreves · 2014-10-15T03:38:06Z

iframe_sample_app/app.js

-      if (data.firstLoad) {
-        this.showIframe({ width: '1024px', height: '500px' });
+    handleMessageReceived: function(data) {
+      if (data.awesome) {


data.awesome was just to demonstrate the ability to pass data around, since we're already using data.message below we can probably get it of data.awesome everywhere else.

itirkarp · 2014-10-21T00:50:36Z

💇
/cc @zendesk/quokka
Ready for review

danielbreves · 2014-10-21T03:06:24Z

👍

sandlerr · 2014-10-21T03:08:41Z

iframe_sample_app/templates/iframe.hdbs

+
+</div>
+
+{{iframe "http://localhost:9001"}}


sandlerr · 2014-10-21T03:09:06Z

any chance of a screenshot / licecap gif?

itirkarp · 2014-10-21T03:12:38Z

@sandlerr There is a screenshot in the readme

sandlerr · 2014-10-21T03:25:12Z

👍

svizzari · 2014-10-21T03:35:43Z

iframe_sample_app/README.md


-This app aims to be a good start to learn how to iframe things of different sizes and methods.
+This app aims to be a good start to learn how send messages between an iframe and an app using the [Zendesk App Framework SDK](https://github.com/zendesk/zendesk_app_framework_sdk)


...learn how to send...

?

Modifying iframe_sample_app to send and receive messages

Modifying it to send and receive messages instead of displaying conte…

fd40d01

…nt from an external website

tmcinerney added wip enhancement labels Oct 14, 2014

tmcinerney assigned itirkarp Oct 14, 2014

tmcinerney mentioned this pull request Oct 14, 2014

Update iFrame Sample App #59

Closed

sandlerr reviewed Oct 14, 2014
View reviewed changes

danielbreves changed the title ~~WIP: Modifying iframe_sample_app to send and receive messages~~ WIP: Modifying iframe_sample_app to send and receive messages #59 Oct 15, 2014

danielbreves changed the title ~~WIP: Modifying iframe_sample_app to send and receive messages #59~~ WIP: Modifying iframe_sample_app to send and receive messages Oct 15, 2014

danielbreves reviewed Oct 15, 2014
View reviewed changes

adammw reviewed Oct 15, 2014
View reviewed changes

Simplified the initial hello to show just a handshake message

33bbb6f

danielbreves reviewed Oct 15, 2014
View reviewed changes

itirkarp changed the title ~~WIP: Modifying iframe_sample_app to send and receive messages~~ Modifying iframe_sample_app to send and receive messages Oct 21, 2014

itirkarp removed the wip label Oct 21, 2014

sandlerr reviewed Oct 21, 2014
View reviewed changes

iframe_sample_app/templates/iframe.hdbs

</div>

{{iframe "http://localhost:9001"}}

Copy link

Contributor

sandlerr Oct 21, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

\n OCD

svizzari reviewed Oct 21, 2014
View reviewed changes

Simplified form logic and got rid of awesome

d53b56f

itirkarp force-pushed the itirkarp/demo-chat-with-zafsdk branch from 8464ffa to d53b56f Compare October 21, 2014 23:11

itirkarp added a commit that referenced this pull request Oct 21, 2014

Merge pull request #64 from zendesk/itirkarp/demo-chat-with-zafsdk

b248960

Modifying iframe_sample_app to send and receive messages

itirkarp merged commit b248960 into master Oct 21, 2014

itirkarp deleted the itirkarp/demo-chat-with-zafsdk branch October 21, 2014 23:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modifying iframe_sample_app to send and receive messages #64

Modifying iframe_sample_app to send and receive messages #64

itirkarp commented Oct 14, 2014

tmcinerney commented Oct 14, 2014

sandlerr Oct 14, 2014

itirkarp Oct 15, 2014

adammw Oct 15, 2014

danielbreves Oct 15, 2014

itirkarp Oct 15, 2014

danielbreves Oct 15, 2014

itirkarp Oct 15, 2014

danielbreves commented Oct 15, 2014

danielbreves commented Oct 15, 2014

danielbreves commented Oct 15, 2014

maximeprades commented Oct 15, 2014

danielbreves commented Oct 15, 2014

maximeprades commented Oct 15, 2014

danielbreves commented Oct 15, 2014

maximeprades commented Oct 15, 2014

danielbreves commented Oct 15, 2014

adammw Oct 15, 2014

itirkarp commented Oct 15, 2014

danielbreves Oct 15, 2014

itirkarp commented Oct 21, 2014

danielbreves commented Oct 21, 2014

sandlerr Oct 21, 2014

sandlerr commented Oct 21, 2014

itirkarp commented Oct 21, 2014

sandlerr commented Oct 21, 2014

svizzari Oct 21, 2014


		This app aims to be a good start to learn how to iframe things of different sizes and methods.
		This app aims to be a good start to learn how send messages between an iframe and an app.

Modifying iframe_sample_app to send and receive messages #64

Modifying iframe_sample_app to send and receive messages #64

Conversation

itirkarp commented Oct 14, 2014

References

Risks

tmcinerney commented Oct 14, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielbreves commented Oct 15, 2014

danielbreves commented Oct 15, 2014

danielbreves commented Oct 15, 2014

maximeprades commented Oct 15, 2014

danielbreves commented Oct 15, 2014

maximeprades commented Oct 15, 2014

danielbreves commented Oct 15, 2014

maximeprades commented Oct 15, 2014

danielbreves commented Oct 15, 2014

Choose a reason for hiding this comment

itirkarp commented Oct 15, 2014

Choose a reason for hiding this comment

itirkarp commented Oct 21, 2014

danielbreves commented Oct 21, 2014

Choose a reason for hiding this comment

sandlerr commented Oct 21, 2014

itirkarp commented Oct 21, 2014

sandlerr commented Oct 21, 2014

Choose a reason for hiding this comment