ERP News

Setting up the SAP Fiori Prototyping Kit

1.76K 0

I’m a CRM Consultant by trade and low and behold I’m writing my first Blog on how to set-up the SAP Fiori Prototyping Kit.

I’ve been cracking on with the openSAP (https://open.sap.com/) course “Build Your Own SAP Fiori App in the Cloud” (https://open.sap.com/courses/fiux1 ). There’s been a good deal of mention on the course about the Prototyping Kit which can be used in MS Powerpoint, however I’ve not been able to get this too work at all. This could be due to the fact that the Prototyping Kit appears to be constantly updated due to the ramped up usage of Fiori, or alternatively I’m just doing it wrong

So instead it works much better using the Axure RP PRO (http://www.axure.com) Software, and even with this in mind there does not appear to be too much guidance about on how to set this up…so the following is my attempt to guide you folks on this.

Step 1:  Get to here: https://experience.sap.com/fiori-design/

  • Hit the Resources Link

 

This gets you through to this page.

 


Step 2:  Install SAP ICON Font and Design Stencils

So the documentation refers to installing the SAP ICON Font, however hitting the link will download the “openui5-sdk”. I’m not sure you really need to do this unless you want to start developing, so I’m not going to use this. It’s about 130Mb…a bit large if you just want to make use of a Font right?

 

So moving onto the Design Stencils, hover of the Design Stencils link and click on it to begin the download

Step 3:  Once this is downloaded (as a zip file)

  • Unzip the file and put the resulting file somewhere useful for your purposes.

Image_05.png

Step 4:  Drill into the folder

  • I’m sure the Mac users will figure it out …J

Image_06.png

  • You’ll then need to unzip the SAP_iconfont…zip file

  • Now keep drilling through this unzipped folder until you get into the “fonts” folder.

Image_08.png

  • Double click on “SAP-icons.ttf” file

  • Hit the Install button

  • Now that this is done, you can move onto the next step.

Step 5: Install Axure RP

Back on the web site you can continue reading the commentary about Axure…

So go to the Axure website (http://www.axure.com), and take the option to download the trial version. I’m not going to get into the details of purchasing the software, this blog is to get you up and running and prototyping as soon as possible. It’s up to you if you wish to decide to purchase the software at the end of the trial.

Install the software, I took all of the default options.

Image_12.png

Once the software is installed you can launch.

Select the “Close” option while under the Trial Version

Step 6: Load in the Stencils

From the Widgets Menu, select “Load Library”

Locate the *.rplib files from the downloaded Fiori Stencils Folder which we downloaded in the “Download Stencils” Step. Select all entries and click on “Open”

 

 

…now you’re done!

 

Step 7:  So from the Fiori Stencils select the Launchpad and drag it into the view

 


As you can see all elements here are editable, descriptions can be changed, the numeric values can be modified

 

 

Click and update…simple as that.

 

 

If you want to change the background colour, click where I’ve highlighted

 

 

I’ve selected a Linear Gradient, reddish sort of colour, once you’ve selected what you want, then click back on your background.

 

 

Well it works…I didn’t say I was an artist J

 

 

You can copy an exist “App” by highlighting, coping and then moving to where you need

 

And then you can copy text from another App and adjust accordingly.

 

 

Be sure to make use of the co-ordinates box at the top to assist in the placement of items

 

You can then use the “Publish” – “Generate HTML Files” option

 

Take the default options and click Generate

 

 

Now you can locate those files, hit the “Start.html” file

 

 

Your Prototype is visible

 

 

The Preview option performs the same function without saving the work

 

So that’s a very basic introduction, there quite a lot of features in this software. My main aim here was to get you up and running. Hope this gets you there

 

Arden

Leave A Reply

Your email address will not be published.

*

code