Pass the data object to .hbs webpart to be compiled

[ademir85]

Hi,

I'm barely new in this topic, so any help would be appreciated.

Is it possible to pass the data to the .hbs template before compiling? For example, I'm aiming to execute an ajax request to fetch some data and render it in a webpart once the request is executed. Is this supported out of the box in the generator-sppp project or I need to manualy execute compiling of .hbs template?

Thanks in advance. Ademir

[koltyakov]

Hey Ademir,

Thanks for posting the question!

Currently only a limited amount of props is available for usage in .hbs: some settings layer and custom props from app.json.

I usually inject publish path and branding variables.

There is no easy way to inject async data at the moment.

I’ll take a look to provide some sort of preexecutable task before build/watch tasks for extending data context.

Yet, can’t name any ETA. This weekend and next week going to be very rought on my end.

[ademir85]

Hi Andrew,

Thanks for quick response. I really appreciate it.

Ok. In the mean time I'll try to find some solution that could help.

Thanks, Ademir

[koltyakov]

@ademir85,

I actually managed to add the requested functionality. Please check a newly published version.

With new version ./build/tasks/customDataLoader.js file should be created. Inside the file, there should be an export of a function which should return a promise with a custom data object.

E.g.:

//@ts-check

const path = require('path');
const pnp = require('sp-pnp-js');
const PnpNode = require('sp-pnp-node').PnpNode;

module.exports = (buildSettings, configs) => {
  // Function should return a promise with custom data object
  const privateConf = require(path.join(process.cwd(), buildSettings.privateConf));
  new PnpNode({
    siteUrl: privateConf.siteUrl,
    authOptions: {
      ...privateConf
    }
  }).init();
  return pnp.sp.web.get();
};

then in .hbs custom data is accessible within customData object.

In existing sppp projects:

• npm i --save-dev sp-build-tasks
• copy customDataLoader.js

Please let me know if it works for you?

[koltyakov]

Closing the issue. Please reopen if any questions still remain.