0

I want to import jspdf to my business application studio project without using the index.html since i read that index.html doesnt get called when opening apps from fiori launchpad.

I can get the jspdf part working, but once i call the autotable method it throws an error: "Uncaught TypeError: doc.autoTable is not a function"

enter image description here

The path with the jspdf libs:

enter image description here

manifest.json:

"resources": {
  "css": [
    {
      "uri": "css/style.css"
    }
  ],
  "libs": [
      {
          "uri": "libs/jspdf.js"
      },
                {
          "uri": "libs/jspdf.min.js"
      },
                {
          "uri": "libs/jspdf.plugin.autotable.js"
      },
                {
          "uri": "libs/jspdf.umd.min.js"
      }
  ]
}

included in my controller like this:

    sap.ui.define([
        "sap/ui/core/mvc/Controller",
        "../model/formatter",
        "sap/ui/core/Fragment",
        "../libs/jspdf",
        "../libs/jspdf.plugin.autotable",
        "../libs/jspdf_debug"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, formatter, Fragment, syncStyleClass,jspdf, jspdf_autotable, jspdf_debug) {
        "use strict";
        //jQuery.sap.require("libs/jspdf_debug");
        //jQuery.sap.require("libs/jspdf.plugin.autotable");

If i put the jquerys back in the app crashes on startup with this error:

"ModuleError: failed to load 'libs/jspdf_debug.js' from resources/libs/jspdf_debug.js"

Hope someone can help me and looking forward to your suggestions!

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
doostaay
  • 71
  • 2
  • 12

1 Answers1

1

If you didn't do it already, migrate to ui5-tooling. Afterwards you can include everything installed via npm.

UI5-Tooling has a very unclear documentation and academic handling... but there is a example for lodash:

specVersion: "2.5"
type: application
metadata:
  name: my.application
--- # Everything below this line could also be put into the ui5.yaml of a standalone extension module
specVersion: "2.5"
kind: extension
type: project-shim
metadata:
  name: my.application.thirdparty
shims:
  configurations:
    lodash: # name as defined in package.json
      specVersion: "2.5"
      type: module # Use module type
      metadata:
        name: lodash
      resources:
        configuration:
          paths:
            /resources/my/application/thirdparty/: "" # map root directory of lodash module

Basically,

  • install jspdf also over npm: npm i jspdf --save-dev
  • check jspdf in ```node_modules`` an find the dist folder
  • adjust project-shim
  • if you are unsure about path etc. install temporally lodash, so you can compare path

Once everything is in place, you can access the files via URL. If this works you can also load them with sap.ui.require during runtime and they are part of your build.

Some modules install them self globally so sap.ui.require will return undefined and the imported stuff is found under window.myGlobalUtilSTuff.

Benedikt Kromer
  • 711
  • 6
  • 22