3

I am trying to call a function in an external javascript file from SharePoint 2013 ribbon button. I have a Typescript file and i am using Webpack to transcompile it to javascript. When i try to call the function from browser console og SP2013 button, it is undefined. Has any body done it before.

Following are the files used in setup.

Typescript file :

import * as $ from 'jquery';
import * as pnp from 'sp-pnp-js';

export class HelperLibrary {

    public Bar() {
        return "This is a string";
    }
}

Webpack config file:

var path = require('path');
var webpack = require('webpack');

module.exports = {    
    entry: {
        app: ['./js/ts/HelperLibrary'
              ]
    },
    output: {        
        path: path.resolve(__dirname, './js/js'),
        filename: 'app.js'
    },
    module: {
        loaders: [{
            test: /\.ts$/,
            include: path.resolve(__dirname, './js/ts'),
            loader: 'ts-loader'
        }]
    },
    resolve: {
        extensions: [".webpack.js", ".ts", ".js"]
    }
};

Single javascript file.

/******/ (function (modules) { // webpackBootstrap
    /******/    // The module cache
    /******/    var installedModules = {};
    /******/
    /******/    // The require function
    /******/    function __webpack_require__(moduleId) {
        /******/
        /******/        // Check if module is in cache
        /******/        if (installedModules[moduleId]) {
            /******/            return installedModules[moduleId].exports;
            /******/
        }
        /******/        // Create a new module (and put it into the cache)
        /******/        var module = installedModules[moduleId] = {
            /******/            i: moduleId,
            /******/            l: false,
            /******/            exports: {}
            /******/
        };
        /******/
        /******/        // Execute the module function
        /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        /******/
        /******/        // Flag the module as loaded
        /******/        module.l = true;
        /******/
        /******/        // Return the exports of the module
        /******/        return module.exports;
        /******/
    }
    /******/
    /******/
    /******/    // expose the modules object (__webpack_modules__)
    /******/    __webpack_require__.m = modules;
    /******/
    /******/    // expose the module cache
    /******/    __webpack_require__.c = installedModules;
    /******/
    /******/    // define getter function for harmony exports
    /******/    __webpack_require__.d = function (exports, name, getter) {
        /******/        if (!__webpack_require__.o(exports, name)) {
            /******/            Object.defineProperty(exports, name, {
                /******/                configurable: false,
                /******/                enumerable: true,
                /******/                get: getter
                /******/
            });
            /******/
        }
        /******/
    };
    /******/
    /******/    // getDefaultExport function for compatibility with non-harmony modules
    /******/    __webpack_require__.n = function (module) {
        /******/        var getter = module && module.__esModule ?
        /******/            function getDefault() { return module['default']; } :
        /******/            function getModuleExports() { return module; };
        /******/        __webpack_require__.d(getter, 'a', getter);
        /******/        return getter;
        /******/
    };
    /******/
    /******/    // Object.prototype.hasOwnProperty.call
    /******/    __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    /******/
    /******/    // __webpack_public_path__
    /******/    __webpack_require__.p = "";
    /******/
    /******/    // Load entry module and return exports
    /******/    return __webpack_require__(__webpack_require__.s = 0);
    /******/
})
/************************************************************************/
/******/([
/* 0 */
/***/ (function (module, exports, __webpack_require__) {

    module.exports = __webpack_require__(1);


    /***/
}),
/* 1 */
/***/ (function (module, exports, __webpack_require__) {

    "use strict";

    Object.defineProperty(exports, "__esModule", { value: true });
    var HelperLibrary = (function () {
        function HelperLibrary() {
        }
        HelperLibrary.prototype.Bar = function () {
            return "This is a string";
        };
        return HelperLibrary;
    }());
    exports.HelperLibrary = HelperLibrary;


    /***/
})
/******/]);
0

Here is the workaround to make it happen.

import * as $ from 'jquery';
import pnp from 'sp-pnp-js';

declare global {
    interface Window {       
        ShowCustomDialog(): void;
    }
}

var showCustomDialog = function () {
    console.log("success");
}

window.ShowCustomDialog = showCustomDialog;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.