Introduction of Fiori for iOS control Series Blog

The series blogs will be a full introduction of  Fiori for iOS controls .

It helps you to get best benefits of controls provided by SAP to develop iOS apps using swift language.

Part1: Overview 

Introduction of Fiori for iOS

Overview of Controls of Fiori for iOS

Part2: Step by step blogs to use Fiori controls

  Set up development environment for Fiori for iOS development

2.1 Build input form using FUIFormCell series controls

Getting Start with FUIFormCell control and it’s sub classes(This Blog)

Build complex input form

Make your code reusable

Short Summary

Part3: Realize Fiori floor plans using Fiori for iOS controls

Part4: Theme customization

In previous blog, you have got the knowledge of how to set up your Xcode project for your Fiori for iOS development.

Starting from this blog, I will introduce you a series of most commonly used controls, FUIFormCell controls.

Introduction

When you display detail information of a business entity, or you want user to input something, you need a form. In the form, you need not only plain key-value pairs as input fields, you need user to input date, time, or choose a value or several values from a list, even in some times you will need your user to take a photo or upload a file from his/her iPhone.

If you are familiar with programming on pure iOS SDK, you should know all of those involve much effort on coding.

FUIFormCell is a protocol(interface), Fiori for iOS provided 15 different ready to use controls ( current version is 1.2.100), from simple to complex  to help you build a complex input form easily. All the controls have similar properties, methods, delegates for basic functions. Some advanced controls( ex. FUIAttachmentFormCell) requires additional effort for implement, but the basis part keep the same with simple controls. All the 15 controls has implemented the FUIFormCell protocol(interface).

You can find all the controls and documents in

Fiori for iOS Reference

You can also find it in your local copy of SAP Cloud Platform SDK for iOS, under the Documentation folder.

Although there are documents, I believe it’s not a good way to start from it. In this blog, we will implement a very simple control called FUISimplePropertyFormCell.

The control display a label and a text field, it’s a great control to display  and edit normal properties, like First Name and Last Name, as below,

Before you start

Before you start to reading this blog, you should know we use Swift language and iOS SDK built by Apple as the base of Fiori for iOS. So if you want to fully understand of what we have done in this blog and following blogs, you should have knowledge of those.

Here are some videos for beginners to understand the development on iOS device

Create a Project and Finish the Initial Setup

1.Create a project with following information, and import frameworks of the SDK according my previous blog.

2.In the left panel, click the ViewController.swift and press Delete, delete the file

3.In the pop up, click Remove Reference and continue

4.Click the file “Main.storyboard,

5.Select the View Controller in the center of your screen, and delete it by press Delete, then you will get a blank screen

6.In the right bottom corder of the screen, find the search field, input “Navigation Controller”, click and drag the Navigation Controller to the center of your screen.

After that you will get 2 view controller in your work area of the storyboard.

( When you drag a Navigation Controller to a blank story board, the Xcode gives you a UITableViewController and embedded into a UINavigation Controller, because the combination is used so frequently )

7.Set the initial view

8.Right click your project name folder in the top-left pannel( click on the folder, not the project name in top-left corner!!), choose “New File…” in the context menu

9.Select Cocoa Touch Class and click Next

10.Create class

11.You will find there are so much source codes generate for you after you click the field generated,  let’s do some explanation for it.

11.2 Number of sections and number of rows in section

Those two functions tell the table control there are how much sections and how much rows in each section.

Open you iPhone, you will find many UI are built using UITableView, dynamically or staticky, you can easily get the idea of section and rows after you see the “Settings” app .

11.3 tableView, Cell for row at

This would be the most important function for table control. Once you have told the control how many sections and rows you have, it will ask you what is the content of each cell. It will call this method for every cell, in each call, it will provide you a parameter called indexPath, which has two property , section and row, starting from 0 . You need to create a UITableViewCell object or it’s subclass as the return value in this method.

Another interesting thing for swift is the name convention. In any programming language you familiar with, the name of a function is important, you must assign meaningful names for your function. But it is not 100% correct in swift.

Parameters of a function in swift have it’s own names, an external name (Label) for invoker, and an internal name ( name ) for definer.  Swift use different names for external user and internal user makes the function and it’s parameters reads like human languages for both users.

Let’s take ” func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) ” as an example.

The function has two parameters, the first one have a internal name tableView, the external view is omitted( “_” means omitted), the second one have an external name cell For RowAt, an internal name IndexPath.

From the invoker’s perspective you can read the function as ” tableView cell for row at”, and from the definer’s perspective, “indexPath” is a better name for your internal code than cellForRowAt. So, many function name apple provided are pretty short, you need to take parameter labels in to you consideration when consuming or naming function.

For UITableViewDelegate, you can find many functions called tableView, but have different parameter labels, swift treat them as different functions. This concept is called “Function Overload”, in other language. Swift support the concept although you can not find the word in document of swift.

12 Associate the UI table view to your class and clear existing cells on it

Open main.storyboard and choose UITableViewController by click the golden circle on top-left corner of the view.

Open identity inspector by click the icon top right of Xcode, in Custom Class section, choose the class you have just created in previous steps from the Class dropdown list.

Delete existing cell by click Table View Cell in the outline of the view and press delete

Add your custom code for your first FUIFormCell control

1.Open MyFormTableViewController.swift by single click it

2.Import SAPFiori Library using import statement

3.Change the class to sub class of FUIFormTableViewController

4.Register FUI control to table control

In this step, you need to tell the table control what custom controls ( from apple’s perspective, SAP’s controls are custom controls) you want to use in the table.

You do this by calling register(_,forCellReuseIdentifier) method of tableView control, the method require two parameters.

The first parameter, without a label, require a class type of the control. In swift, you use ClassName.self to indicate the type.

The second parameter requires a string, you can use this string to get your cell back later. To avoid mistyping, all FUIFormCell controls provide you a static constant. You should always use this constant as the reuse identifier.

In this example you will register a most simple control: FUISimplePropertyFormCell.

You do this in viewDidLoad function.

5.Create a variable to handle the data

Like any other program, you need to handle the data in your variable, not the control. You need to declare a string variable in the class and give it a default value.

You declare it before viewDidLoad function.

6.Set sections, rows for the table view

For simplify, we set the table have 1 section and have 1 row in the first section. For this, we need to modify the default implementation for

numberOfSections(in tableView: UITableView) -> Int

and

tableView(_ tableView: UITableView, numberOfRowsInSection section: Int)

set return value for both methods to 1

7.Create the cell and return it to table control when she want it.

This step is where the magic works. You need to write some code in

tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) 

8.Test Your work!

In the toolbar of Xcode, choose your iPhone 7, and click run, you will see the result.

Summary

Well done! You have your first fiori for iOS control!

Although it’s quite simple, you have learnt the process of FUIFormCell control.

One you are familiar with this process, you will use it to build complex form easily.

In next blog, we will use several controls to build a complex form to display information of a person, you will find it’s so easy to use FUIFormCell controls.