This project follows up with the original SAPFioriBikes Blog by configuring the Search Results View Controller and Content View Controller.
Extending the SAPFioriBikes project with the MapFloorplan DetailPanel. Check out the code HERE
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.
The FUIMapDetailPanel is a controller similar to Apple Map's panel.
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.
The panel can show additional details by calling the `detailPanel.pushChildViewController()` method. See `pushContent(_ : BikeStationAnnotation)` for an example implementation.
If the user cannot conveniently see the closest station, they can swipe up on the panel to display the stations sorted by distance.
Configuration is performed during `viewDidLoad`
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!
Similar to the Search Results, the Content View Controller is setup in `viewDidLoad`
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.
To dismiss the content view controller, the user can tap the close button in the top right corner of the panel.
The Detail Panel has similar functionality on the iPad, but takes advantage of extra screen size.
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.
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.
Detail Panel Functionality
The FUIMapDetailPanel is a controller similar to Apple Map's panel.
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.
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.
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!
Configuring the 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.
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.
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
Conclusion
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.
- SAP Managed Tags:
