+ Start a Discussion
Laurent LemireLaurent Lemire 

SFDC is not defined

Hi,

I am currently making a connected app that connects with salesforce using the OAuth Webflow access method. So I've been looking at the doc and I've put this code into my web app : 
<html>
<head>
    <script type="text/javascript" src="/sdk/js/canvas-all.js"></script>
</head>
<body>
    <script>

        function loginHandler(e) {
            var uri;
            if (! Sfdc.canvas.oauth.loggedin()) {
                uri = Sfdc.canvas.oauth.loginUrl();
                Sfdc.canvas.oauth.login(
                    {uri : uri,
                        params: {
                            response_type : "token",
                            client_id : "3MVG9lKcPoNINVBLigmW.8dAn4L5HwY VBzxbW5FFdzvU0re2
                                f7o9aHJNUpY9ACdh.3SUgw5rF2nSsC9_cRqzD",
                            redirect_uri : encodeURIComponent(
                                "https://demoapp1234.herokuapp.com/sdk/callback.html")
                        }});
            }
            else {
                Sfdc.canvas.oauth.logout();
                login.innerHTML = "Login";
                Sfdc.canvas.byId("oauth").innerHTML = "";
            }
            return false;
        }

        // Bootstrap the page once the DOM is ready.
        Sfdc.canvas(function() {
            // On Ready...
            var login    = Sfdc.canvas.byId("login"),
                loggedIn = Sfdc.canvas.oauth.loggedin(),
                token = Sfdc.canvas.oauth.token()
            login.innerHTML = (loggedIn) ? "Logout" : "Login";
            if (loggedIn) {
                 // Only displaying part of the OAuth token for better formatting.
                Sfdc.canvas.byId("oauth").innerHTML = Sfdc.canvas.oauth.token()
                    .substring(1,40) + "…";
            }
            login.onclick=loginHandler;
        });
    </script>
    <h1 id="header">Force.com Canvas OAuth App</h1>
    <div>
        access_token = <span id="oauth"></span>
    </div>
    <div>
        <a id="login" href="#">Login</a><br/>
    </div>
</body>
</html>

I understand how the code is supposed to work, but for an unknown reason, my browser console says this : 
Uncaught ReferenceError: Sfdc is not defined
    at eval (eval at <anonymous> (jquery-1.12.4.min.js?v=cWplNnVObXpZU0NRS2tueHgwYlR5bGhmcE82bVAveVVEM05xY0JDZ2xxZz01:2)
I can see that my canvas-all.js is loaded correctly, so I don't understand what the problem is.
Please Help!
srlawr uksrlawr uk
I recognise that bit of code literally from the docs (including the demo heroku callback and client_id, which always makes me nervous when I see it posted on the internet, but I'm guessing it's an actually long dead connected app)...

So just to check, you have that page up and running on a server somewhere, and you put the canvas-all.js file in a subfolder called /sdk/js so its definitely being found? (I do see you say you have checked this... but ..!)

I have just run up a simple page on my machine and the Canvas library works fine...

I know this might not seem like tackling the problem, as this contains the same reference, but try removing all the on page javascript and just put in:
Sfdc.canvas.onReady(function () {
        console.log("Canvas application ready");
});

If it can't find the Sfdc reference in Canvas-all though, I would imagine that will still fail too though... but by removing all the other JS stuff which might be screwing JS references or whatever, it's probably what I'd try first (first simplify, the re-complify)
Laurent LemireLaurent Lemire
The code does come from the docs, https://developer.salesforce.com/docs/atlas.en-us.206.0.platform_connect.meta/platform_connect/canvas_app_oauth_code_example.htm?search_text=DOM and for the script, I reference it from my own salesforce domain (https://<my domain>.lightning.force.com/canvas/sdk/js/42.0/canvas-all.js) and if I go into the developer tool (I'm using chrome) and into the network tab, I can see that the script is loaded correctly.

If I tried running the code you sent, it would do the same error, but after some testing, I realized that if I put the code into a setTimeout function like this : 
setTimeout(function(){
  Sfdc.canvas.onReady(function () {
    console.log("Canvas application ready");
  });
});

I wouldn't get the error. BUT, nothing would appear. but if I tried to add this line to the timeout function :
console.log(Sfdc.canvas.isUndefined());
it would come out as true.

So it would seem that the canvas-all.js script wasn't fully loaded when executing my javascript code, but now I have a new problem wich is that my app doesn't seem to receive the canvas object.

Another information that could be useful to know and that I forgot to mention in my initial post : due to how the third app is designed, the canvas-all.js script is not loaded in the header of the page, but it is instead loaded in a <script> tag in the body of the page. This could be the reason why I need to wait for thr script to load, but I don't understand how it could the reason for the Sfdc.canvas object to be undefined.