Injecting HTML to Modal with Script?

[Winston Pang]

So basically I want to add a link to the app toolbar, which I've done like so:

sdk.Toolbars.addToolbarButtonForApp(

{title: 'Connect Service',

onClick: function(dropdownView){

var el = document.createElement("div");

el.style = "width: 600px; height: 500px;";

sdk.Widgets.showModalView({el: el, title: "Connect Service"});

}

});

I know I can dynamically load the HTML contents from a defined web resource html file.

But my question is, how do I make the HTML contents interactive like being able to make a remote call etc?

The only way I can think of is, in one of my contents scripts, I load another JS file that injects it into the document.head.

And rely on attaching onclick events to the loaded scripts.

Is there any other way?

So simply put I want to show a modal view, with a .html file I have as part of my extension, and I want the extension to be able to execute code, say logging in to authenticate.

Thank you in advance.

[Omar Ismail]

hi Winston, please don't load your JS file into the document head, we have a lot of experience with that technique and long story short you'd be in a for a world of hurt.

If the JS file you want to load is already hosted somewhere you can use the SDK's built in loadScript function. https://www.inboxsdk.com/docs/#LoadingDependencies

let me know if that makes sense. Thanks!

ᐧ

Omar

--
You received this message because you are subscribed to the Google Groups "InboxSDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/013bd851-2e65-44c2-8f84-d3baaf54ec0e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Winston Pang]

Hey Omar

Thank you for the reply.

Does the load script work with bundled scripts in the chrome extension? So I can simply do a chrome.getUrl for it to work?

So if I understand from the API, it loads it into the same context as the the inbox sdk plugin. How would it work in the scenario I've highlighted?

I.e. A link that opens a inbox modal, reads the embedded HTML file and provides that HTML content as the element of the options object. How can that injected HTML call or link up to any of the functions that is part of my script?

Thank you in advance.

[Winston Pang]

I had a look over some extensions, I think this one is from you as well:

https://github.com/InboxSDK/stripe-for-gmail

It looks like you're using underscore templates to compile and render the final HTML to insert.

One thing that caught me by surprise is that inside your sidebarTemplate.html, you can invoke the formatStripeCurrency function, that is defined inside your app.js content script. Sorry if this is a n00bish question, but do templates that instantiated in the same script, somehow automatically have access to all the functions in that content script?

So I was thinking in my context, if I was to have a HTML Login page, I believe I would either have to:

1) Set the onclick of the Login button, to call a function in the content script that loaded this HTML Login page. However My issue would be how do I "bind" or reference the values entered in the username/password?

2) When I load the HTML Login page template, and create the element. I use jquery to select the input fields and the button, and manually add event handlers to them, But feels ugly.

Any pointers for this scenario or what I should read to achieve it?

Thank you.

[Chris Cowan]

> but do templates that instantiated in the same script, somehow automatically have access to all the functions in that content script?

Values in underscore templates are just javascript. Anything in scope is accessible to them.

>However My issue would be how do I "bind" or reference the values entered in the username/password?

Input elements have a value property that contains the text in them, which you can access if you have a reference to the element. (If you're using jQuery, you use the .val() method.)

>When I load the HTML Login page template, and create the element. I use jquery to select the input fields and the button, and manually add event handlers to them, But feels ugly.

You're not doing anything wrong from the sound of that. But yeah, that strategy can get a bit tiring and ugly. You could use a UI library like React which fixes that pain and has a lot of other benefits.