UDINA BTP

Appearance

SAP Analytics Cloud ​

What is SAP Analytics Cloud?

The SAP Analytics Cloud solution combines BI, augmented and predictive analytics, and planning capabilities into one cloud environment. As the analytics layer of SAP’s Business Technology Platform, it supports advanced analytics enterprise-wide. See: SAP Analytics Cloud

SAP Fiori Icon Font Integration ​

This is an abstract of the original repository CustomFontsSAC from Michael Graf.

Hosting a font definition file ​

To use the SAP Fiori Icon Font in SAP Analytics Cloud, host a simple font definition file on a SAP BTP using Staticfile Buildpack (or use a public web server):

Project Structure ​

Create a project directory using the following directory tree:

.
├── nginx
│   └── conf
│       └── includes
│           └── headers.conf
├── site
│   ├── SAP-icons.woff2
│   └── style.css
├── .cfignore
├── manifest.yaml
└── Staticfile

HTTP Headers ​

Create a file with location-scoped NGINX directives:

headers.conf

batch
add_header 'Access-Control-Allow-Origin' '*';

Font Ressource ​

Download the font file sap-icons.woff2 from the latest SAPUI5 shipment and put it in site directory.

Cascading Style Sheet ​

Create a stylesheet referencing the font:

style.css

css
@font-face {
    font-family: 'SAP Fiori Icons';
    src:
        url('https://YOUR_SERVICE_URI.cfapps.eu10.hana.ondemand.com/SAP-icons.woff2') 
        format('woff2');
    font-weight: normal;
    font-style: normal;
 }

Staticfile File Configuration ​

To configure relevant options, add the following configuration properties:

Staticfile

batch
root: site
location_include: includes/*.conf
force_https: true

Exclude Sources ​

If you have resources inside your folder that should not be deployed, add it here:

.cfignore

batch
node_modules/
README.md

App Manifest ​

Deploy your site to cloud foundry using an app manifest:

manifest.yaml

yml
---
applications:
- name: sac
  path: .
  memory: 64M
  disk_quota: 64M
  buildpacks:
  - staticfile_buildpack

Using the font file ​

  1. Add the font definition URL to the SAC custom web font settings (see documentation link below).

    Add font definition

  2. Add the hostname where the font is located to the Trusted Origins in the SAP Analytics Cloud Administration page.

    Add trusted origin

  3. Done! You are now ready to use the SAP Fiori icon font in your SAP Analytics Cloud stories:

    Use custom icon