Category: Design Studio

Custom Fonts in Design Studio

There are a lot of fonts which are supported by Design studio by default, but there are infinite varieties of fonts available in the internet and not all of them are supported by Design Studio directly. If you need to use one of the fonts in your design studio application, there is an easy way of doing so without having to install the font library on the end user’s computer. There are a lot of fonts which convert alphabets into images which can be used on the dashboards as images. Here is how to do so.

  1. Usually the default font types are supported on all browsers and don’t need any installations on the end user’s machines or any CSS scripting to add the font families. But for font types like “SAP-Icons” (this is a font type which converts unique texts to images you can use on the dashboards. Ex : https://openui5.hana.ondemand.com/iconExplorer.html)
  2. There are a lot of websites where you can look up for fonts you need but most of them are not free. I found one website which offers font types for free for commercial use as well.

    http://www.fontsquirrel.com/fonts/list/find_fonts

  3. Go into the website and download the .ttf file for required fonts. In the below example I am trying to add a new font called “Roman Caps”.

  4. To start adding a new font family to your design studio dashboard, you will need a .ttf file and .eot/.woff file as well.

    Note: .eot is a file type which is supported only in IE. If your target browser is anything other than IE, you might have to get the .woff file as well.

  5. Creating an .eot or .woff file can be done using a lot of websites for free available on google.
  6. Once you have the .eot and .ttf files ready, you have to upload these files to the repository folder and create a CSS file where you can import these 2 files.

  7. Now, to import the above 2 files into a CSS file and add the new font-family to your design studio dashboard put in the below code in your CSS file.

  8. With the above step, when you reference the .css file in your dashboard as custom CSS file, the new font face will be available for use in your dashboard.
  9. I used a text component to test if the new font type is working, and to do so, I created a CSS class in the .css file to use the new font family that I just imported.

  10. After I save the css file also and reference it in the dashboard and apply the CSS class to the text object here is the result I get.

  1. As a next step, I am exploring if I can use the same kind of CSS scripting to change the font types on charts and other components as well and I will update the post as soon as I find something.

Happy designing

Naveen Mamidi

Tek Analytics BI Practice

Fiorified BI Launchpad

Quick picks

Url to accesshttp://server:port/BOE/BILaunchpad

Security Changes – Yes, new right needs to be granted

Old Version – No confusions please, Classic BI launchpad still available and can be used for many advanced functions. In my opinion , new launchpad is strictly a consumer interface.

First Look


Changing preferences

Go to User profile > Click on settings



The setting are very similar to classic BI Launchpad.

    Users can set preferred Landing tab

    Pixels for web-based look

    Hide/show totals for Analysis OLAP

By default the landing page navigates to Home Tab (with Show all selected). Users can change the documents to view as below


Context Menu

Context menu of Tile/document can be launched by clicking the 3 dots at bottom on each tile, which lists all the properties of the document

Context menu is similar to right-click on report in classic BI. Below options available under the context menu


Working with Categories

Document tiles in new BI Launchpad can be grouped by categories.( Standard BOBJ categories). Security can be configured at CMC level. Documents can be tagged to categoris from context menu.


Once the document is assigned to a category . changing the landing page view to categories will display all categories .


Viewing standard BI folders

Once you login to BILaunchpad, select Folders Tab which displays all the folders for which the account has access to.


 

Bharat Sunkari

Managing Partner – Tek Analytics

 

 

Integrating Fiori with BOBJ – SSO

Fiori – BOBJ integration with SSO.

Requirement

Considering Fiori Launchpad as global point of entry for SAP applications, Users always want to see analytical content in the same place. To avoid users launching Business Objects documents via portal or BI Launchpad separately, this document outlines the process of integrating Fiori with Business Objects

Tools used

SAP Business Objects enterprise – BOBJ 4.1 SP4

Design studio – 1.6 SP02

SAP Gateway, Fiori

 Architecture

 

Configuration – (Assuming, the sapgateway protocol is https (which is most likely to be))

Configuring BOBJ Platform

Enable https on BOBJ web application server, no backend https is required.  I am using Tomcat in this example

  • Use Keytool in tomcat java home bin directory to create a self-signed keystore

 

keytool -genkey -alias tomcat -keyalg RSA –keystore keystore.jks.

This command will create a self-signed keystore named keystore.jks under keytool home   directoty

  • Please export self-signed certificate in .crt format.

3.Fiori

keytool -export -alias tomcat -keystore keystore.jks –file https.crt

This command will create https.crt in same directory.

  • Generate SSO certificates and keystore files using PCKS12 tool

Windows location : <INSTALLDIR>\SAP BusinessObjects Enterprise XI4.0\java\lib

Windows Command :  “<INSTALLDIR>\SAP BusinessObjects Enterprise XI 4.0\win64_x64\sapjvm\bin\java” -jar PKCS12Tool.jar -alias bobj -storepass password -dname CN=BOS

The above command generates keystore and cert.der files .

Stop the tomcat, navigate to <Tomcathomedir>/conf/server.xml . Edit the server.xml file as below

Uncomment the https entries and add below parameters.

keystoreFile=”keystore.jks” keystorePass=”password”

 

Restart the tomcat , https links should work .

Configuring Fiori server

Install the https.crt ( certificate generated from keystore.jks )  into fiori abap stack using the below command at OS level

sapgenpse.exe maintain_pk -p <Client_PSE> -a https.crt

Configure SAP gateway to forward the requests to BOBJ platform.

wdisp/system_<number> = SID=BOE, EXTSRV=https://bod:8443 SRCSRV=*:8000 SRCURL=/BOE/

On the ABAP front end server using T code Strustss002 , please import the SSO certifictes generated by BOBJ Platform.

Setting up single sign on on BOBJ Platform

1) Add the ABAP front end as the entitlement system in CMC

2) Import the required Roles and keystore in CMC

3) Setup SAP ABAP stack to send SAP Logon Tokens

Now create a Tile in Fiori Launchpad, redirecting to BOBJ Design studio Opendocument link.  The navigation should work seamlessly

 

Karthik Addula

 

New CSV datasource in Design studio 1.6

With the new Design Studio 1.6 release, it is now possible to create an application on CSV datasources for offline dashboarding and demos

However, the process is not as simple as said. This document is intended to provide step by step guide on how to use CSV as a datasource

Whenever we try to add a CSV as a data source, the application will not initialize the data source as it needs a metadata file along with actual CSV file. Below are the steps to easily create the CSV files for design studio usage

Step 1) Login to Design studio platform and create a data source(In the below screenshot connection is based on BICS )

Step 2) click on edit initial view ( Drag and drop the objects needed for CSV file)

Step 2- CSV design studio

 

Step 3) You will see new “ Extract to CSV” option in the query designer

Step 3- CSV design studio

 

Step 4) Select a folder to save the files

Step 4- CSV design studio

 

Step 5) 3 new files will be created under the folder specified in the previous step

Step 5- CSV design studio

 

Step 6) Now close and open the design studio in Local mode

Step 6- CSV design studio

 

Step 7) create a new data source “ select Add CSV Datasource” , navigate to the .CSV file created above

Step 7- CSV design studio

Step 7 A- CSV design studio

 

 

Step 8) files will be copied to application.

 

Step 8- CSV design studio

Happy Designing J

-Karthik Addula