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, so I hope this all makes sense 🙂

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

Image_01.png

This gets you through to this page.

Image_02.png

 
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?

Image_03.png

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

Image_04.png

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 … 😆

Image_06.png

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

Image_07.png

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

Image_08.png

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

Image_09.png

  • Hit the Install button

Image_10.png

  • 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…

Image_11.png

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.

Image_13.png

Select the “Close” option while under the Trial Version

Image_14.png

Step 6: Load in the Stencils

From the Widgets Menu, select “Load Library”

Image_15.png

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”

Image_16.png

…now you’re done!

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

Image_17.png

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

Image_18.png

Click and update…simple as that.

Image_19.png

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

Image_20.png

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

Image_21.png


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

Image_22.png

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

Image_23.png

Image_24.png

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

Image_25.png

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

Image_26.png

Take the default options and click Generate

Image_27.png

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

Image_28.png

Your Prototype is visible

Image_29.png

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

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply