Export PDF in Power Apps and Power Automate (MS Flows): Approach 1

In this blog, we will be exporting the List Item details into the PDF document with a button click. This approach is based on the use of both PowerApps and PowerAutomate.

In this scenario, a customized PowerApps form is there that is used to display data coming from the SharePoint list, and a button will be present on click of which users can export content into the PDF.

Create Flow

Complete flow with all actions

1. Open the flow, click on the Create option, search for "PowerApps", and select the option "PowerApps button" which triggers the flow on button click.

2. Add the "Initialize variable" action.
Enter the required values: – Name, Type and Value. To initialize the value, click on "See more".

Now click on the option "Ask in PowerApps"; it means the value will come from PowerApps form when flow is called as a parameter.

Select and add the initialized values. Similarly, create a new variable. Filename and initialize.

Now create the FileFullname variable. To initialize the value, select the Expression tab and concatenate the value of the filename variable with the .html file extension.

Similarly, create a new variable, CurrentUser and initialize.

3. Add "Create File" (OneDrive for Business) action.

Click on the Folder icon present in the Folder Path textbox. Browse the library and select the folder under which the HTML file will be saved and later converted to PDF.

Set the variables initialized above for File Name and File Content.

4. Add the "Create file using path" (OneDrive for Business) action.

Click inside the File Path textbox, and a callout will open. Select Path value from the Create file in OneDrive group under Dynamic content. Set PDF as the Target type.

Note: Create file OneDrive is the previous action, and these are all the outputs of it.

5. Add the "Send an email (V2)" (Office 365 Outlook) action.

Provide the required value for this as shown below.

Modify PowerApps Form

1. Open the list where Export PDF functionality needs to be implemented. Click on "Customize forms" to open PowerApps.

2. Add a new screen and add an HTML text control to it.

3. Add the HTML content with dynamic values as shown. The content will be added in double quotes.

4. Add a button for "Export to PDF" functionality. On the button, attach the flow.

    a. Select the button.

    b. On the Action tab, select Flows.

    c. All available flows will appear; select the required one.

    d. Choose the "OnSelect" option to RUN the flow and pass the required parameters.

    e. Save and Publish the PowerApps.

5. Open the display form and click on the "Export PDF" button.

6. The exported PDF will be sent to the current logged-in user's email..

Check the final exported PDF here

🚀 "Happy Coding" 🚀

Transpile ES6 (ES2015) to ES5 code using GULP.

In this blog, I will be sharing how to transpile ES6 (ES2015) to ES5 code using GULP.

Steps to transpile ES6 (ES2015) to ES5 code using GULP.

Babel is the go-to transpiler for ES6.

Download and install Node.JS on your system from https://nodejs.org.

1. Create a project folder and navigate there in the terminal (cmd.exe).

2. To start, we need to generate a package.json file, use

  npm init

This will ask for a few properties: What is the name of your project, version, description, and entry point (it sets the main file of your project)? Leave it as index.js. 

After all options are selected, a "package.json" file will be created with all properties. The package.json file can be edited to update the property’s value set above.

3. Now install the dependencies for the Babel package.

Babel

We need the Babel core, CLI, and ES2015 presets..

Babel-CLI: used to compile files from the command line.

Babe-Core: is a library that gives the ability to use the new functionalities of ES6 for ES5

ES2015 preset: ensures the ability to transpile ES6

  npm install --save-dev babel-cli babel-core babel-preset-es2015

After running the above command, you will see a few new changes in your project directory. First, you will notice that there is now a "node_modules" folder, and second, there is a new entry inside your "package.json" file.

The --save-dev flag will save the modules babel-cli, babel-core, and babel-preset-es2015 in your package.json file under the devDependencies section. This section is used for modules that will be used in development, meaning they are not needed in production. If we had run our install with --save instead, it would have put the module under the dependencies section.

4. Project structure

  |-- dist // Build will end up here

  |-- src // All source code should be inside this folder

      |-- index.js

  |-- gulpfile.js

  |-- package.json

5. Configuration

Babel

Configure Babel to use the ES2015 plugin in your package.json (or .babelrc if you prefer).

  "babel": {

      "presets": ["es2015"]

   }

The first method of transpiling we will look at is using NPM to run Babel. In the "package.json" file, there is a section called "scripts," where we can define commands we would like to run. Using the Babel CLI, we can set up a script to compile our code and output it where we would like. The scripts section takes a JSON object as a value. The keys in this object will be the name of our script, and the value will be the command to run.

  "scripts": {

      "buildjs": "babel ./src/index.js --out-file ./dist/index.js"

   }

Adding the above to our package.json in the scripts section will take code from src/index.js, run it through Babel, and output the file in dist/index.js. The Babel command has many options that we will look at later, but the --out-file flag is used to determine the destination of the compiled source.

Add some code to the src/index.js file and type npm run buildjs into your terminal so you get the output in dist/index.js.

Now, when we run the script, it will output the file and stop. If you want to keep working on the file, we need to run this repeatedly. We can configure the script to watch over the files and run when they change!

  "scripts": {

      "buildjs": "babel ./src/index.js --watch --out-file ./dist/index.js"

  }

By adding the --watch flag, we are telling Babel to listen for any changes in the "src/app.js" file, and when changes are made, we want to output a transpiled version of that code to "dist/app.js".

6. Gulp is an NPM module and a task runner that helps to automate. We need to install Gulp globally on the system, so we install it.

  npm install -g gulp

Now install the dependencies for the gulp package.

We need gulp and the Babel module for gulp.

  npm install --save-dev gulp gulp-babel

After running the above, you will see a few new changes again in your project directory in the "node_modules" folder, and second, that there is a new entry inside your "package.json" file.

7. Configuration

Gulp

Create a new file called "gulpfile.js" and require the two gulp libs:

  const gulp = require('gulp');

  const babel = require('gulp-babel');

The require function will pull in any modules from the ‘node_modules’ folder. The code in gulpfile.js can be written in ES6 or ES5 both will work.

Gulp is all about tasks. We will start by defining some simple tasks in this file.

I have created the task "default". You can provide any task name, with the exception of default. This task JS will pick up the JS files from /src folder, compile them with Babel, and save everything in /dist folder.

To run this default task

The ES6 code will be compiled into JavaScript. Here, the command ran only once, and for every change, the command needs to be executed every time. 

Let us set up the ability for Gulp to keep watching our files. The gulp.watch method takes a few arguments: a file path that waits for file changes and an array of the task(s) you want to run.

To run task

This will listen for all the file changes and compile them to ES5 code.


🚀 "Happy Coding" 🚀

SPFx Environment Setup Error: rollbackFailedOptional: verb npm-session.

In this blog, I will be sharing how I have troubleshooted and found the solution to one of the errors I faced while setting up the development environment for SharePoint Framework while following the official documentation provided by Microsoft.

Faced issues while running the command shown below.

The execution got struck and freezes at this "rollbackFailedOptional" and after about ~5 minutes it gets completed with the below error messages:

After analyzing the error and log files, it appears that the error is related to network connectivity or some proxy problem. But I am not using any proxy. I'm on a corporate network. When I checked for any type of proxy, there was nothing.

I also checked the internet settings in the IE browser under Internet Settings >> Settings >> LAN Settings, and it also doesn't show any proxy settings. So, I believe I am not behind any proxy server.

I checked the internet but didn’t get any solutions, so I opened an issue on GitHub and in the NPM community.
https://github.com/SharePoint/sp-dev-docs/issues/3266
https://npm.community/t/sharepoint-spfx-npm-install-error-using-node-8-15-0/4645

The default value of the "proxy" and "https-proxy" keys of the NPM config is NULL. After doing some more R & D, I tried to set the proxy setting value to the above key (this solution works in my scenario).

npm config set proxy http://n****500:8080

npm config set https-proxy http://n****500:8080

After successful execution of the above command, a .nmprc file will be created at C:\Users\username. The file created will be hidden, so make sure to check the "Hidden items" checkbox in the ribbon.

Also, the same proxy settings need to be applied as shown below.

Conclusion: In corporate or some environments, the proxy is a somewhat mandatory setting; otherwise, NPM install will not work.

🚀 "Happy Coding" 🚀