Build Complex Input Form Rapidly using FUIFormCell controls: Build Complex Input Screen
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.
Part2: Step by step blogs to use Fiori controls
2.1 Build input form using FUIFormCell series controls
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.
|Date of Birth||FUIDatePickerFormCell|
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”
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
5.Set the controller class for your table view to
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.