Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
This project follows up with the original SAPFioriBikes Blog by configuring the Search Results View Controller and Content View Controller.

Detail Panel Search Results Bart

Extending the SAPFioriBikes project with the MapFloorplan DetailPanel. Check out the code HERE

Finding the Closest Station

This app is most useful when you can easily find the closest station. Acquiring device location allows us to sort and show the distance between the user and each station. Showing the user's location on an MKMapView is documented in the SAPFiori Reference. Once the user location is displayed, we can use the FUIMapToolbar.UserLocationButton to zoom and center on the annotation. The user location button is conveniently built in to the floorplan toolbar.

User Location

Detail Panel Functionality

The FUIMapDetailPanel is a controller similar to Apple Map's panel.

Apple Maps

Our custom panel maintains the functionalities of Apple's panel, including displaying a minimum, intermediate, and maximum state. Additionally, the internal tableView of the panels allow scrolling of its content.

Panel Scroll

The panel can show additional details by calling the `detailPanel.pushChildViewController()` method. See `pushContent(_ : BikeStationAnnotation)` for an example implementation.

Configuring the Search Results View Controller

If the user cannot conveniently see the closest station, they can swipe up on the panel to display the stations sorted by distance.

Search Results View Controller

Configuration is performed during `viewDidLoad`
detailPanel.searchResults.tableView.register(FUIObjectTableViewCell.self, forCellReuseIdentifier: FUIObjectTableViewCell.reuseIdentifier)
detailPanel.searchResults.tableView.dataSource = searchResultsObject
detailPanel.searchResults.tableView.delegate = searchResultsObject
detailPanel.searchResults.searchBar.delegate = searchResultsObject

The developer adds their own implementation for the `tableView` and `searchBar`by implementing the `UITableViewDataSource`, `UITableViewDelegate`, and `UISearchBarDelegate`. See the `SearchResultsControllerObject` for the implementation. In this example, the stations are sorted by distance away from the user. The bicycle and lightning icons show if there are bikes or EBikes at the designated station based on the color.

Now with the searchbar, it is possible to search for all the stations near BART!

Detail Panel Search Results Bart

Configuring the Content View Controller

Content View Controller

Similar to the Search Results, the Content View Controller is setup in `viewDidLoad`
detailPanel.content.tableView.dataSource = contentObject
detailPanel.content.headlineText = contentObject.headlineText
detailPanel.content.subheadlineText = contentObject.subheadlineText

Again, the developer is responsible for their own implementation of the `tableView`'s `UITableViewDataSource` and `UITableViewDelegate`. Additionally, the Content View Controller has a `headlineText` and `subheadlineText` as the header of the tableView. See the `ContentControllerObject` for the implementation. More details are shown by showing tags with the number of bikes, EBikes, and docs available. There is an additional button to launch the Ford GoBike App to reserve at this station.

Rent a Bike

To dismiss the content view controller, the user can tap the close button in the top right corner of the panel.

iPad Support

The Detail Panel has similar functionality on the iPad, but takes advantage of extra screen size.

Detail Panel iPad Search Results

Detail Panel iPad Content View Controller

Next Steps

In the next post I will extend this project to show other GeoSpatial objects including `FUIPolyline` and `FUIPolygon`.

Read the next blog post HERE

The completed project can be found HERE


The FUIMapDetailPanel provides a convenient way to search for stations and display additional details directly on top of the mapView similar to Apple Maps. Developers simply need to set their own `UITableViewDataSource`, `UITableViewDelegate`, and `UISearchBarDelegate` to add their own custom implementation. Despite the smaller screen sizes on the iPhone compared to the iPad, the DetailPanel can show scrollable content as needed.