Adobe Sign JS SDK - javascript

Adobe changed their GitHub from the last time we imported their latest code for the JS SDK. It used to have pre-generated Browser specific JS files that you copy paste into the code, now it uses Swagger auto generation into Node.Js files and wants the users to browserify it to use it in browser js.
TL:DR I don't know how to convert the node.js files into browser files
I have tried following all of the instructions that they have in their readme, but nothing seems to work. The only thing I haven't tried (which could be the key) is to write my code in a JS file with the node.js "require()" to import the js files, then browserify my code. If that's what I have to do then I unfortunately will not be able to upgrade.
Right now the code that I use to access the api is this
<!-- supplied by Adobe before -->
<script type="text/javascript" src="~/scripts/sha1-min.js"></script>
<script type="text/javascript" src="~/scripts/adobe-sign-sdk.js"></script>
<script type="text/javascript" src="~/scripts/superagent.min.js"></script>
<script type="text/javascript" src="~/scripts/validator.min.js"><</script>
async function GenerateAuthForm() {
var context = new AdobeSignSdk.Context();
//Initialize the Widget API
var agreementApi = new AdobeSignSdk.AgreementsApi(context);
//Get the Widget model
var widgetsModel = AdobeSignSdk.AgreementsModel;
var agreementsModel = AdobeSignSdk.AgreementsModel;
//Populate the access token
/**/
var agreementCreationInfo = new agreementsModel.DocumentCreationInfo();
//does more work below
and that is super easy to call and use.
I want to be able to do that same process, but with the updated version, so I can use Workflows rather than agreements.
EDIT:
I have tried to browserify the index.js located at /AdobeSignNodeJsSdk/src and it did combine all of the files, but I had no way to call it, or I didn't understand how to call it. I tried to call it as below
<script src="~/Scripts/bundle.js"></script>
<script>
var context = new SwaggerJsClient.ApiClient(); //this was undefined
var api = new context.WorkflowsApi()
//do stuff with the api or model
Furthermore in the file that was put through browserify, it references root.SwaggerJsClient.apiormethod, so I assumed that there is some way to call this, and I just don't know what it is.

I am closing this question as I figured out how to import the code properly using browserify like this
browserify -r ./index.js:AdobeSignSdk > bundle.js
then referencing it like
var adobeSignSdk = require('AdobeSignSdk');
var context = new adobeSignSdk.ApiClient();
And I would like to report that the "Latest version" after going through the code and determining how to use it, has significantly LESS functionality than the previous version. You cannot create a Workflow through 2.0, you can only get the existing ones, and their statuses. The previous release, 1.1.0 still doesn't work correctly when you try to create a workflow as they didn't include
customWorkflowAgreementCreationRequest.getDocumentCreationInfo()
so when you try to create one it fails with an error.
TypeError: customWorkflowAgreementCreationRequest.getDocumentCreationInfo is not a function
This is unfortunate as that is the feature I needed, and I will likely now have to switch my application from JS to the C# REST Api, something that needed to happen anyways, just waiting for when it wasn't so urgent.

Related

How to use libraries installed via <script> tags in React

I'm trying to create a Facebook Instant HTML5 application in React.
As per their Quick Start documentation, they want me to install their SDK using a script tag, like so:
<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
I've created my app using create-react-app. I've placed that snippet inside /public/index.html so it looks like:
...
<body>
<noscript>You need to enable javascript to run this app.</noscript>
<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
...
They also provide the following snippet:
// Once all assets are loaded, tells the SDK
// to end loading view and start the game
FBInstant.startGameAsync()
.then(function() {
// Retrieving context and player information can only be done
// once startGameAsync() resolves
var contextId = FBInstant.context.getID();
var contextType = FBInstant.context.getType();
var playerName = FBInstant.player.getName();
var playerPic = FBInstant.player.getPhoto();
var playerId = FBInstant.player.getID();
// Once startGameAsync() resolves it also means the loading view has
// been removed and the user can see the game viewport
game.start();
});
Which I've placed in src/index.tsx'.
This then gives me errors, saying:
'FBInstant' is not defined no-undef
Which likely means that the library is not being installed properly / brought into the proper namespace so that my React code can access it.
How can I get around this? Facebook tells me not to download and include it myself - they'll reject my app.
Important notes:
Do not download and add the SDK to your bundle as it will be rejected in later steps.
This is a new way to build games on Facebook and does not support the Graph API.
So it seems I must use these <script> tags. How can I make React recognise it?
Once you have added the fbinstant script tag in the index.html
In your src/index.tsx, Add this to the top (before your snippet):
const FBInstant = window.FBInstant;
As you explained, you're getting this error because the typescript compiler does not recognize FBInstant, Since it is not installed.
However in this case seems all you need is to make the compiler ignore these warning. The most suitable in my opinion is export it to a seperate js file (and not ts / tsx), since it is a javascript code. Than import it as any node module.
If you don't like this option, alternative methods can be:
including the SDK code on your index.html, right after your script tag
Using #ts-ignore to suppress typescript errors
define FBInstant before the SDK script (more about this here)
interface Window {
[key:string]: any; // Add index signature
}
const FBInstant = (window as Window)['FBInstant'];

Having trouble with requiring AWS in Javascript

I'm trying to implement DynamoDB in a Javascript file. I tried out multiple tutorials in succession to no avail. All I'm trying to do is make a query from within my Javascript code (which is being run in an HTML page). Unfortunately, my code doesn't even get up to that. It throws me errors when I try to require AWS-SDK. I installed aws-sdk with Node.js. After being confused by multiple tutorials, I ended up with the following code:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://requirejs.org/docs/release/2.2.0/r.js"></script>
<script src="boom.js"></script>
</head>
<body></body>
</html>
JavaScript (boom.js):
require(['aws-sdk'], function (foo) {
var CONF = require("./super_secure_conf.json");
var AWS = require("aws-sdk");
function init(){
AWS.config = new AWS.Config({
access_key_id: CONF.AWS_ACCESS_KEY_ID,
secretAccessKey: CONF.AWS_SECRET_ACCESS_KEY,
region: "us-east-1"
});
DynamoDB = new AWS.DynamoDB();
}
});
The file "super_secret_conf.json" is a JSON file containing my AWS Credentials. I tried storing the credentials at ~/.aws/credentials previously, but that wasn't working. (Should credentials be a folder or file? I had tried saving my credentials in a blank file – without any extension. Just thought I'd mention.) So I followed another tutorial, which said to use the JSON method (and I am aware that it is very insecure) which is what you see here. I still get an error though:
Error: Module name "super_secure_conf.json" has not been loaded yet for context: _. Use require([])
All and any help is greatly appreciated.
You are requiring AWS twice, calling it foo the first time. And you aren't waiting for the callback from your config.json require call (or even passing it a callback function). I believe your code needs to change to look like this:
require(['aws-sdk', "./super_secure_conf.json"], function (AWS, CONF) {
function init(){
AWS.config = new AWS.Config({
access_key_id: CONF.AWS_ACCESS_KEY_ID,
secretAccessKey: CONF.AWS_SECRET_ACCESS_KEY,
region: "us-east-1"
});
DynamoDB = new AWS.DynamoDB();
}
});
However I'm not sure if the path "./super_secure_conf.json" is actually going to work. That looks like a path you would use for loading a file in a server-side NodeJS application, not a browser-side JavaScript application.
Note that the reason you have to load your config this way is because the ~/.aws/credentials method of loading an AWS config is not going to work for a JavaScript app running in a browser. I think you've been reading NodeJS tutorials which aren't going to translate perfectly to JavaScript in the browser. I would highly recommend you start by looking through the documentation for AWS SDK for JavaScript in the Browser, and in particular read the page on Configuring the SDK in the Browser.

firefox bootstrap addon: install event is not executed

I'm trying to create a bootstrapped addon that just sets the new tab url at install to a new value and resets it to the old one when it gets uninstalled.
Here is my bootstrap.js. I think the install function throws an exception because require is not defined, but I'm not sure if the debugger executes the code I write in Scratchpad in the right scope.
I read somewhere that the api is the same for bootstrapped extensions as the with the add-on sdk, so the require should be fine. If this is not the case, could you please direct me to a page that describes the code I can use in the bootstrap.js, I didn't find anything :(
function startup(data, reason){
}
function shutdown(data, reason){
}
function install(data, reason){
var prev_new_tab_url = require("sdk/preferences/service").get("browser.newtab.url");
var data = require("sdk/self").data;
var url = data.url("startpage.html");
require("sdk/preferences/service").set("browser.newtab.url", url);
var ss = require("sdk/simple-storage");
ss.storage.prev_new_tab_url = prev_new_tab_url;
}
function uninstall(data, reason){
var ss = require("sdk/simple-storage");
var prev_new_tab_url = ss.storage.prev_new_tab_url;
require("sdk/preferences/service").set("browser.newtab.url", prev_new_tab_url);
}
from: https://forums.mozilla.org/viewtopic.php?f=7&t=22621&sid=4ea13ebd794f85600d6dcbcf6cc590a7
in bootstrap you dont have access to sdk stuff like that. im not sure how to access that stuff.
but i made exactly what you are looking for with localization :D took like 10min :D
https://github.com/NoitForks/l10n/tree/setpref-install-uninstall
note: the quirk that localization files are not available during the uninstall procedure. so i had to move this to shutodwn proc while testing for aReason of ADDON_DISABLE. it makes sense that files are not available in uninstall
you asked:
How do you know the Services.prefs.getCharPref method?
i responded:
I first imported the Services.jsm module then i looked on MDN for what all it had:
https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm?redirectlocale=en-US&redirectslug=JavaScript_code_modules%2FServices.jsm
then i saw prefs then it linked to nsIPrefBranch and that documented all of it. nsIPrefBranch2 is deprecated so I knew it wasn't that.
MDN is your friend :)
Plain bootstrapped add-ons do not automatically get access to the SDK, i.e. there is no require.
Either use non-SDK stuff exclusively, like nsIPrefBranch, Services.jsm, etc.
Or write an SDK add-on in the first place
Or hook up the SDK loader for your add-on yourself. Only instance I know other than SDK add-ons themselves (heh) that does such a thing is Scriptish.

Eclipse HTML5 Project - JavaScript Code Assist Only Works In Certain Cases

I am using Eclipse Juno developing a static web project. My project uses several different JavaScript files. One of the files contains a function:
function IconData(size, url) {
this.size = size;
this.url = url;
}
I have another function that returns an object of type IconData:
function PageInfo() {
this.iconData = function() {
var iconData = new IconData();
iconData.size = 10;
iconData.url = "http://somepage.com/image.png";
return iconData;
}
}
In another JavaScript file I create an instance of PageInfo and call the function iconData:
var page = new PageInfo();
// populate stuff
var icon = page.iconData();
If I type icon. then CTRL+SPACE to start code assist I get the following message popups in Eclipse:
No Default Proposals
No Template Proposals
However, if I create a new instance of icon data such as:
var iconData = new IconData();
then I type iconData. then CTRL-SPACE the code assist pops up and show me all the possibilities:
My question is, why doesn't code assist work in the first scenario but it works in the second?
Thank you.
P.S. I have Google how to enable code assist for JavaScript in Eclipse I found several sites that said I need to make sure I have JavaScript Development Tools installed and I made sure that I have them installed so I know that is not the issue.
I think it's a limitation with JSDT. I suggest you that you install tern.java which extends JSDT to improve JS completion, hyperlink, hover.
Copy your JS files in a folder, convert your project as tern and configure Script path with your folder. Please read Getting Started to know how to do that.
Here a screenshot with your case (here scripts folder is configured as script path):
Please note that tern.java is developed with Eclipse Luna, so I suggest you to use this version and not Juno.

The web page does't act to changes in my javascript code (django)

I am working with django now. And I write a javascript for my website, but now it seems that the website doesn't act to changes of my javascript code.
Here is part of the code I have in the javascript file on my computer
$(document).ready(function() {
alert("fslfjsdlkf");
// geocode
//if ($("input[name$='l']") && $("input[name$='l']").val() == '' && !$(".email")){
if(1>2){
var geocoder;
var latitude;
var longitude;}
here is the code I get from the Developer tools of Chrome
$(document).ready(function() {
// geocode
if ($("input[name$='l']") && $("input[name$='l']").val() == ''){
var geocoder;
var latitude;
var longitude;
var altitude;
var user_location;
You can see that the codes are different.
Also, the web page will act to my html code.
Another thing to add, I use git for this project.
Does anyone have an idea of the reason???
Thanks in advance!
I've run into similar problems with Django. It has to do with caching of static content. Try restarting your webserver and/or clearing your browser cache. Also, some more information about your setup would be helpful.
How are you running Django? What webserver and delivery method are you using?
What version of Django are you using? There have been some changes in the latest version (1.3) that affect how I would answer your problem.
If you are using 1.3, where are you putting the js? In the STATIC_ROOT or one the application static folders?
If the code is in a static javascript file, and you are not serving it out of the runserver, perhaps you need to regenerate static files? manage.py collectstatic will handle that for you.
It's not related to Django, but I have had similar problems with Chrome before. It sometimes just doesn't reload Javascript files, and uses the files from the cache even though the file on the server has changed.
Until this problem is solved, I'd suggest developing with another browser (which is a shame, as Chrome is very nice in other respects).

Categories

Resources