Skip to Content

Introduction:

This will be a series blog for Fiori for iOS. It helps you to use controls provided by SAP to develop iOS apps using swift language.

The series blog contains 4 parts, they are:

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

Build Complex Input Form Rapidly using FUIFormCell controls: Getting Start with FUIFormCell Control(This Blog)

Build Complex Input Form Rapidly using FUIFormCell controls: Build Complex Input Screen

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

And if you want to enforce you skill under experienced trainers help, the best way is to join SAP Apple Academy, which is an academy delivery iOS development courses run by SAP. For now we have two courses help you get the most useful skills for developing enterprise application on iOS devices.
Can’t waiting for this blog? It’s OK if you do it step by step following my instruction for finish the demo!

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.

 

Project Name MyFUIFormCellDemo
Team None
Organization Name Dummy
Organization Identifier  nodomain.dummy

 

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

Click the yellow circle on the top-left corner of Navigation Controller, show the attribute inspector by click the icon on top-right corner of Xcode, find the check box for “Is initial view controller’. check it.
(If you forget to do this, you app will dump while start up. After you check that, you will see a gray arrow in the left of your Navigation Controller )

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

In the class name field, input : MyForm, in the list for “subclass of”, choose UITableViewController, you will find your class name changed to MyFormTableViewController.
If the name did’t changed automatically, changed it to MyFormTableViewController manually .
Click next, then click create.

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.

You class, is subclass of UITableViewController, which is a combination of UIViewController,UITableViewDelegate and UITableViewDataSource.
UIViewController is the base class for any view controller to handle the logic of UIView, so you must implement any of your code for control the behavior of any view as subclass of UIViewController.
UITableViewDelegate and UITableViewDataSource are protocols, like interface in other languages. If you want to handle the behavior, you should implement those two protocols.
There is no equivalent concept for ‘Event’ in swift language, to handle events of ui controls, the ui control defines a protocols, and declare a variable with the type of this protocols, we usually call the variable delegate.
A protocols may contains optional function, that means you can decide weather implement it. When something happens, the ui control call function from the delegate variable.
When you implement a ui control, you need to create you own class, which apply the protocol, and set the delegate variable to your class, that is like you register your event listener to some event. If you haven’t implement some of optional function, it’s behaves like no event listener.
That’s the way of swift handle events.
In this file, there are some auto generated code, all of those are import functions for implementing table view. Now I will explain some of them important for our goal.

11.1 View Did Load

This function is the place we initialize the view, if you want to use FUIFormCell controls, here is the place to register our controls.

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.

 

 

 

 

 

 

 

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply