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

[Former Member]

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

Build complex input form(This Blog)

Make your code reusable

Short Summary

Part3: Realize Fiori floor plans using Fiori for iOS controls

Part4: Theme customization

 

In my previous blog, you have already get the idea of how to use a simple FUIFormCell control.But it will not match your real requirement of just using one control. In this blog, I will guide you to build a complex input screen.

Before we start, let's see the completed project:



In the screen, we used 5 different kinds of controls for six input fields. As below table.

For the usage of every control, please refer to the document or Fiori Mentor app in iPad.

Label	Control Name
First Name	FUISimplePropertyFormCell
Last Name	FUISimplePropertyFormCell
Date of Birth	FUIDatePickerFormCell
Title	FUIListPickerFormCell
Gender	FUISegmentedControlFormCell
Attachments	FUIAttachmentsFormCell

 

Now we start to build the project.

 

Prepare for the project.

Here are some key steps for prepare project for this blog, if you are not familiar with that, you can refer to my previous blog.

1.Create a Xcode project names "MyFUIFormCellDemo2"

2.Delete ViewController.swift

3.Open Main.storyboard, delete all view controllers and drag a Navigation Controller with a Table View Controller. Set the navigation controller to initial controller and clear cells in Table View Controller,

4.Create a SWIFT class, which is a subclass of FUITableViewController, name it

FioriFormTableViewController

5.Set the controller class for your table view to

FioriFormTableViewController

6.Change the code of FioriFormTableViewController.swift, import SAPFiori and set superclass of  FioriFormTableViewController to FUIFormTableViewController

7.Save your project

 

 

Download finished source code

You can download finished source code here

Mention that the code do not contain the project file of Xcode, it only contains source code. Because the Fiori for iOS library is two large to share.

For the code to run, you need to create a Xcode project manually and embed all Fiori libraries into the project, and copy my code into your project.

 

 

Create a Model to Save Your Data

Before we build the UI, we need to create some variables to store our data. For we have 6 variables, we create a structure to store structured data.

1.Create a Person.swift and create structure with 6 properties for it.

In your project, right click MyFUIFormCellDemo2 folder, choose New File ...

This time choose swift file and click Next

 



Save as Person.swift for this file.

 



 

Now open Person.swift, add some code to create a Structure named Person with 6 properties, mention the data type for each property

2.Create array for providing value list for title and gender.

Now we create two arrays to provide input help for title and gender fields. We create it as static property of Person structure for convince access.

3.Create Instance in view controller

Now we've finished the model. And we need to create an instance and fill the structure with sample data in our view controller.

Open FioriFormTableViewController.swift, create a property named person with initial values.

Start Building User Interface

1.Register your FUIFormCell controls

In FioriFormTableViewController, modify the method ViewDidLoad, register all controls you need.

Mention that whatever how many times you use a control, you only need register once for each control. So we only need to register 5 times, not 6 , in our case.

2.Set up information about row number

Set the return value for numberOfSections(in tableView: UITableView) -> Int to 1

and set tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int to return 6

3.Prepare for cells

You need to return cells in function

tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

For this example, you should determine how to return your call according to the position, which is get from parameter indexPath.

So first to get the row number and write a switch-case statement to write all the branches you need and write some comments to indicate which cell you want to fill in.

4.Set up cell for First Name

In case 0 branch, dequeue your cell as FUISimplePropertyFormCell, set up properties as previous exercise and return it.

5.Set up cell for Last Name

In case 1 branch, setup cell as step 4.

6.Setup cell for Date of Birth

If you have experience of iOS programming, you may remember the complex for creating a simple date input field.

But in Fiori for iOS, it' nothing different than create a simple property field except the data type to hold the value needs to be Date

7.Setup cell for Title

For the title field, we want user to select from a list. After user click on the field, we need a separate screen to display the input help. And the navigation to help user navigation to and back from the input help view.

Fortunately SAP helps you to handle all those things. You can do this by using  FUIListPickerFormCell control by simply provide a value to hold user selection and a value list for input help.

The result of this control is an array because it is designed to deals with multiply selection , so we need to do the conversion.

8.Setup cell for Gender

We use FUISegmentedControlFormCell for gender selection. Although the appearance is different with previous one, the code is similar.

This control only allowed for single selection, so we do not need to handle the conversion from array to integer.

Here is a good point to test your application for a while.

9.Setup cell for Attachment

Setup cell for attachment is quite complex because the attachment control involves call back function and needs to access camera and filesystem of the iPhone.

The use of Fiori attachment control is quite similar with standard attachment control as described in the document.

For now you can follow my instruction.

Using FUIAttachmentFormCell control, you can handle the creation, manage and delete of attachments. To handle those actions, you need to implement the delegate  FUIAttachmentsViewControllerDelegate and FUIAttachmentsViewControllerDataSource.

You control how to add attachments by adding actions to the control. In this example we use FUIAddPhotoAttachmentAction for choosing photo from photo library and FUITakePhotoAttachmentAction for taking photo using camera.

For those two action controls, you must implement  FUIAddPhotoAttachmentActionDelegate and FUITakePhotoAttachmentActionDelegate

After you take photo or add photo file, you need to save the url of photo and generate a snapshot for the display in the attachment control, this example also involve some code for process photo. But this is not the point of this blog and for all controls you can copy sample code from SDK Documentation and Fiori Mentor App.

9.1 Import photo library and declare the implementation of delegates we've mentioned

Modify file FioriFormTableViewController

9.2 Sep up cell in case branch

9.3 Create helper properties and method for photo process

Create  a property to store thumbnails for photos, using a Dictionary type



Create two helper method in the class as follow

9.4 Implement delegate FUIAttachmentsViewControllerDelegate

The first function define the behavior when user delete attachments. The parameter contains the index user chose to delete.

In the function, we delete data from person.attachments and reload data to refresh the control.

The second function define the behavior of failure render of attachment item, we do nothing for this.

Note: You can find functions a delegate(protocol requires) and it's sample code by right click the protocol name and choose Jump to Definition.



 

9.5 Implement delegate FUIAttachmentsViewControllerDataSource

The first function get number of attachments form person.attachment



The second function get each attachment. It get url from person.attachments and get thumbnail from variable thumbnail 



It looks like this function returns two value this is the concept of tuple, combine several variable into one in a semicolon. 

9.6 Implement delegate FUIAddPhotoAttachmentActionDelegate and FUITakePhotoAttachmentActionDelegate

To implement those two delegates, simply to call reuse methods as follow



Now you have finished the coding part, it's only one step to finish your project.

 

10.Finalize your project

Now you can run your project as previous blog. But if you try to add attachment, the program will be terminated because you haven't require the usage of PhotoLibrary or Camera

Open Info.plist, click '+'  under Information property list, choose Privacy - Camera Usage Description



Add another option named Privacy - Photo Library Description Usage Description

 

Now you've done! Run your app to see the result! Congratulations!

Although we have built a so complex screen by using simple code( comparing t to pa original cocoa touch framework), the code is not reusable and not easy to maintain.

In my next blog, I try to make this example with reusable code, make it a pattern for similar case.