Download Stylesheet from SAP BTP to your iOS App

Create a file named CustomTheme.nss. There are various ways to create a file on macOS, but the simplest is to open a terminal, and type the following:

cd ~/Desktop
touch CustomTheme.nss

This will create the CustomTheme.nss file on your desktop.

Right-click the newly created file on your desktop, and open it with your text editor of choice.

Add the following content:

NavigationBar {
    bar-tint-color: #B0D450;
}

BarButton {
    font-color: #3A835B;
}

fdlFontStyle_subheadline {
    font-style: subheadline;
    font-color: #3A835B;
}

fdlFUIWelcomeScreen_headlineLabel {
    font-color: #3A835B;
}

Save the file when done, and close the text editor.

Log on to SAP Mobile Services for development and operations cockpit at https://hcpmsadmin-<your_user_id>trial.dispatcher.hanatrial.ondemand.com/ and navigate to Mobile Applications > Native/Hybrid:

Click on the application you want to have universal link support, and under Assigned Features, click the Client Resources feature:

In the page that opens, click the Upload Client Resource button on the right. The New Client Resource popup opens.

Add the following details:

Click OK when done. The uploaded stylesheet is now listed:

Open your app’s Onboarding/OnboardingManager.swift file. In class OnboardingManager, just above the delegate field, add the following private fields:

private var nssResource: SAPcpmsClientResourcesDownloadStep.ClientResourceInfo? = nil
private var nssResourceURL: URL? = nil

The first field will store the stylesheet as an instance of SAPcpmsClientResourcesDownloadStep.ClientResourceInfo. The second field will hold the internal URL to the downloaded stylesheet.

Now, create two helper functions. One will retrieve the uploaded stylesheet, and the other will construct a URL based on the results of the first method:

private func getNssResource() -> SAPcpmsClientResourcesDownloadStep.ClientResourceInfo {
    let path = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
    let nssResource = SAPcpmsClientResourcesDownloadStep.ClientResourceInfo(mandatory: true, canOverwrite: true, name: "CustomTheme", version: nil, folderURL: path)

    return nssResource
}

private func getNssResourceURL(nssResource: SAPcpmsClientResourcesDownloadStep.ClientResourceInfo) -> URL {
    let url = nssResource.folderURL!.appendingPathComponent("\(nssResource.name ?? "Theme").nss").standardizedFileURL
    return url
}

And finally, you need to modify the variables onboardingSteps and restoringSteps by adding a step for the download of the stylesheet, and a step for applying the stylesheet.

In both onboardingSteps and restoringSteps variables, add the following variable assignments:

nssResource = getNssResource()
nssResourceURL = getNssResourceURL(nssResource: nssResource!)

These variables are now assigned with the results from the two helper methods you created.

Then, in onboardingSteps, add the following step right after the settingsDownload step:

SAPcpmsClientResourcesDownloadStep(clientResourceInfoList: [nssResource!]),

and add the following right after the applyDuringOnboard step:

NUIStyleSheetApplyStep(fileURL: nssResourceURL!),

Similarly, in restoringSteps, add the following step right after the settingsDownload step (which may be commented out, depending if you’re using an online or offline enabled app):

SAPcpmsClientResourcesDownloadStep(clientResourceInfoList: [nssResource!]),

and add the following right after the applyDuringRestore step:

NUIStyleSheetApplyStep(fileURL: nssResourceURL!)

Build and run the app. After you have logged on, you’ll notice the app now uses the stylesheet you uploaded to SAP BTP: