Access Javascript objects imported by url in html

Question

I am writing an embedded application where i am using Office 365 library to access outlook email context which is exposed to my application via global object Office

i wrote already javascript application in which i included script url in html page like this :

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

after i am accessing context in ES6 javascript function like below :

 Office.initialize = function (reason) {
            $(document).ready(function () { 
                 Office.context.mailbox.addHandlerAsync(Office.EventType.ItemChanged, callbackfunction);
            });
        };

I want to do the same thing in scala JS.

For that included Office js library in html as above way.

After trying to access Office object like :

@js.native
@JSGlobal
object Office extends js.Any {
  def initialize(f: String => Unit):js.Any = js.native
}

when i call this Office object, it is throwing error.

def callback = (reason:String) => {
  println(s"reason called in callback function => $reason")
}
Office.initialize(callback)

How to instantiate and access office object in scala JS?

ERROR :

VM3981 playground-fastopt-bundle.js:4078 Uncaught TypeError: $g.Office.initialize is not a function
    at HTMLDocument.<anonymous> (VM3981 playground-fastopt-bundle.js:4078)
    at mightThrow (VM4209 playground-fastopt-bundle.js:25770)
    at process (VM4209 playground-fastopt-bundle.js:25838)

Initialize is not available in Office object. we have to load the function on run time. Error message :

add your initialization code on the Office.initialize function.

gist of code : https://gist.github.com/rajeevprasanna/8d4f193bc328f2c2d48e113960fb25a6

Answer 1

I solved this problem in below approach :

as per error message add your initialization code on the Office.initialize function, i have to define a property to load the function.

@js.native
@JSGlobal
object Office extends js.Object {
  var initialize:js.Function1[String, _] = js.native
}

after loaded above function :

Office.initialize = { r:String =>
        println(s"function initialized. reason => $r")
      }

this approach is similar to event handling of button clicks.

Refer : https://github.com/scala-js/scala-js-dom/blob/5adf7290a4b1fdf7759dfed120e4050f87d9f0a2/src/main/scala/org/scalajs/dom/raw/Html.scala#L416

Answer 2

Given the error, it seems that the Office.initialize function has not been created yet at the time you try to call it. The Office object exists, but it has no field initialize (or it is not a function).

This probably just because the order of your script tags is not correct. Make sure that the script that is supposed to define Office.initialize is executed before the Scala.js code.

Answer 3

I am not sure

Office.initialize = { r:String =>
    println(s"function initialized. reason => $r")
  }

the code is valid or not But I wrote a small example and It works well. Have a look at https://gist.github.com/abdheshkumar/f2ef0c73b942a8f5a48ec20559679105