Migrate to 3.0.0
- 1 Migrate from Component API
- 2 Migrate from Screen API
- 3 Migrate Cleanup and Feedback step
- 4 Overview of new UI customization options
- 4.1 Colors
- 4.2 Images
- 4.3 Typography
- 4.4 Text
- 4.5 UI elements
- 5 Migrate to new UI
- 5.1 Onboarding screens
- 5.2 Camera screen
- 5.3 Review screen
- 5.4 Analysis screen
- 5.5 Help screens
- 5.6 No results screen
- 5.7 Error screen
- 5.8 QR code scanner
- 6 Migrate Return Assistant
In version 3.0.0 we modernized our UI. In addition, we simplified how the UI is customized, and introduced centralized customization for the color palette, and typography. We also removed the Component API integration option and unified the public API of the SDK and introduced an easier way to customize certain parts of the UI.
GiniBankConfiguration
is a singleton now. You don’t need to create a new instance of GiniBankConfiguration
, use GiniBankConfiguration.shared
instead.
Migrate from Component API
The Component API provided more UI customization options at the cost of a more difficult integration and maintenance. It was based on the view controllers, and you managed navigation between them and also updated the navigation whenever we introduced breaking changes.
Maintaining the Component API along with the Screen API required an increasing amount of effort as we added new features. We decided therefore to unify both APIs and introduce the ability to inject fully custom UI elements.
The major benefit of the Component API was the ability to use a custom navigation bar. Via GiniBankConfiguration.shared.customNavigationController
that is still possible with the new public API.
Follow these steps to make the migration to the new public API easier:
Configure the SDK the same way as before by using
GiniBankConfiguration
.If you used a custom navigation bar, then you can now pass
UINavigationViewController
toGiniBankConfiguration.shared.customNavigationController
.The SDK provides a custom
UIViewController
object, which should be shown by your app. It handles the complete process from showing the onboarding to providing a UI for the analysis.
// MARK: - Default networking
let viewController = GiniBank.viewController(withClient: client,
importedDocuments: documents,
configuration: bankConfiguration,
resultsDelegate: self,
documentMetadata: documentMetadata,
api: .default,
userApi: .default,
trackingDelegate: self)
// MARK: - Custom networking
let viewController = GiniBank.viewController(importedDocuments: documents,
configuration: bankConfiguration,
resultsDelegate: self,
documentMetadata: documentMetadata,
trackingDelegate: trackingDelegate,
networkingService: self)
Handling the analysis results and receiving the extracted information (error or cancellation) can be handled through
GiniCaptureResultsDelegate
protocol implementation.You can also provide your own networking by implementing the
GiniCaptureNetworkService
andGiniCaptureResultsDelegate
protocols. Pass your instances to theUIViewController
initializer of GiniCapture as shown above.Remove all code related to interacting with the SDK’s specific view controllers. From now on the entry point is the
UIViewController
and customization happens throughGiniBankConfiguration
and via overriding of images and color resources.Use the new UI customization options and follow the screen-by-screen UI customization section to adapt the look of the new UI.
Migrate from Screen API
The new public API is based on the Screen API, so you only use the new UI customization options and follow the screen-by-screen UI customization section to adapt the look of the new UI.
Migrate Cleanup and Feedback step
We simplified the feedback-sending logic. When you clean up Gini Bank SDK, pass the values the user uses (and potentially corrects) to GiniBankConfiguration.shared.cleanup()
. All values except the one for the amount are passed in as strings. The amount needs to be passed in as Decimal
and its currency as an enum
value.
You don’t have to call any additional methods to send the extraction feedback.
Default Networking
You don’t need to maintain a reference and call sendFeedbackBlock
anymore. The GiniBankConfiguration.shared.cleanup()
method takes care of sending the feedback.
Custom Networking
Here as well you don’t need to maintain a reference and call sendFeedbackBlock
anymore. Your implementation of the GiniCaptureNetworkService.sendFeedback()
method is called when you pass the values the user uses (and potentially corrects) to GiniBankConfiguration.shared.cleanup()
.
Overview of new UI customization options
To simplify UI customization, we introduced global customization options. There is no need to customize each screen separately anymore.
Colors
We provide a global color palette GiniColors.xcassets
which you are free to override. Custom colors are applied on all screens.
For more information about the names of the color resources, see GiniColors.xcassets.
Images
Images customization is done via overriding of GiniImages.xcassets resources.
Typography
We provide global typography based on text appearance styles from UIFont.TextStyle
. To override them in your application, use GiniBankConfiguration.updateFont(_ font: UIFont, for textStyle: UIFont.TextStyle)
, for example:
// If you want to scale your font, use our method `scaledFont()`.
let configuration = GiniBankConfiguration.shared
let customFontToBeScaled = UIFont.scaledFont(UIFont(name: "Avenir", size: 20) ?? UIFont.systemFont(ofSize: 7, weight: .regular), textStyle: .caption1)
configuration.updateFont(customFontToBeScaled, for: .caption1)
// If you would like to pass us already scaled font.
let customScaledFont = UIFontMetrics(forTextStyle: .caption2).scaledFont(for: UIFont.systemFont(ofSize: 28))
configuration.updateFont(customScaledFont, for: .caption2)
Text
Text customization is done via overriding of string resources.
For more information about the string resources, see Localizable.strings.
UI elements
Certain elements of the UI can now be fully customized via UI injection. It utilizes view adapter interfaces which you can implement and pass to GiniBankConfiguration
when configuring the SDK. These interfaces declare the contract the injected view has to fulfill and let the SDK ask for your view instance when needed.
Top navigation bar
To inject your own navigation bar view, pass your navigation view controller to GiniBankConfiguration.shared.customNavigationController
. The view from the custom navigation view controller is displayed on all screens as the top navigation bar.
Bottom navigation bar
You can opt to show a bottom navigation bar. To enable it, pass true
to GiniBankConfiguration.shared.bottomNavigationBarEnabled
.
The top navigation bar is still used, but its functionality is limited to showing the screen’s title and an optional close button. Inject a custom top navigation bar if your design requires it even if you enabled the bottom navigation bar.
Migrate to new UI
Onboarding screens
The new onboarding screen uses the global UI customization options. You can discard the earlier screen-specific customizations.
Images and text are onboarding page specific and need to be customized for each page.
For more information, see Onboarding Screen.
Breaking changes
Setting custom onboarding pages
The OnboardingPage
struct was changed to also enable setting a title for the page and injecting a view for the illustration.
If you set custom onboarding pages, create the OnboardingPage
as shown in the example:
configuration.customOnboardingPages = [OnboardingPage(imageName: "captureSuggestion1", title: "Page 1", description: "Description for page 1")]
New features
Custom illustration views
To inject any custom view for the illustration, implement the OnboardingIllustrationAdapter
interface and pass it to either GiniCapture
or the OnboardingPage
constructor.
For example, if you want to animate the illustrations on the onboarding pages, implement the OnboardingIllustrationAdapter
interface to inject a view that can animate images (for example, Lottie
) and pass it to the relevant onboarding illustration adapter setters (for example, onboardingAlignCornersIllustrationAdapter
, onboardingLightingIllustrationAdapter
, onboardingMultiPageIllustrationAdapter
, onboardingQRCodeIllustrationAdapter
) when configuring the GiniBankConfiguration.shared
instance.
Camera screen
The new camera screen uses the global UI customization options. You can discard the earlier screen-specific customizations.
For more information, see Camera Screen.
Review screen
The new review screen uses the global UI customization options. You can discard the earlier screen-specific customizations.
Breaking Changes
We unified UI for the single page and multi pages options. We removed rotation and reorder functionalities. The tips view was removed as well.
New Features
Custom loading indicator
You can show a custom loading indicator with custom animation support on the Process button. Your custom loading indicator should implement OnButtonLoadingIndicatorAdapter
interface and be passed to GiniBankConfiguration.shared.onButtonLoadingIndicator
.
Bottom navigation bar
To show a bottom navigation bar, pass true
to GiniBankConfiguration.shared.bottomNavigationBarEnabled
. There is a default implementation, but you can also use your own by implementing the ReviewScreenBottomNavigationBarAdapter
interface and passing it to GiniBankConfiguration.shared.reviewNavigationBarBottomAdapter
.
For more information, see Review Screen.
Analysis screen
The new analysis screen uses the global UI customization options. You can discard the earlier screen-specific customizations.
Breaking Changes
String keys removed: ginicapture.analysis.suggestion.header
The following string keys now represent suggestion titles with new keys added for describing the tips. ginicapture.analysis.suggestion.1
ginicapture.analysis.suggestion.2
ginicapture.analysis.suggestion.3
ginicapture.analysis.suggestion.4
ginicapture.analysis.suggestion.5
New Features
Custom loading indicator
You can show a custom loading indicator with custom animation support at the center of the screen. Your custom loading indicator should implement CustomLoadingIndicatorAdapter
interface and be passed to GiniBankConfiguration.shared.customLoadingIndicator
. This loading indicator is also used on the Camera screen
when loading data for a valid QR code.
For more information, see Analysis Screen.
Help screens
The new help screens use the global UI customization options. You can discard the earlier screen-specific customizations.
Breaking Changes
String keys changed: ginicapture.help.menu.firstItem
→ ginicapture.help.menu.tips
ginicapture.help.menu.secondItem
→ ginicapture.help.menu.formats
ginicapture.help.menu.thirdItem
→ ginicapture.help.menu.import
New Features
Bottom navigation bar
To show a bottom navigation bar, by pass true
to GiniBankConfiguration.shared.bottomNavigationBarEnabled
. There is a default implementation, but you can also use your own by implementing the HelpBottomNavigationBarAdapter
interface and passing it to GiniBankConfiguration.shared.helpNavigationBarBottomAdapter
.
For more information, see Help Screen.
No results screen
The new no-results screen uses the global UI customization options. You can discard the earlier screen-specific customizations.
Breaking Changes
Removed localization keys
ginicapture.noresults.warning
ginicapture.noresults.collection.header
ginicapture.noresults.gotocamera
ginicapture.noresults.warningHelpMenu
New features
New localization keys
ginicapture.noresult.enterManually
ginicapture.noresult.retakeImages
Enter manually button
Users can now click the Enter manually button on the no-results screen and exit the SDK. To enable this, implement GiniCaptureResultsDelegate.giniCaptureDidEnterManually()
.
For more information, see No Results Screen.
Error screen
The new error screen uses the global UI customization options.
Breaking Changes
Showing errors during usage of the SDK was changed from snackbar to a whole new screen.
New Features
New UI
The new error screen gives options to retake photos or enter details manually and displays errors with more detailed descriptions.
Enter manually button
Users can now click the Enter manually button on the error screen and exit the SDK. To enable this, implement GiniCaptureResultsDelegate.giniCaptureDidEnterManually()
.
For more information, see Error Screen.
QR code scanner
During the QR-code-only mode, the capture and import controls are hidden from the camera screen.
To enable the QR-code-only mode, both flags GiniBankConfiguration.shared.qrCodeScanningEnabled
and GiniBankConfiguration.shared.onlyQRCodeScanningEnabled
should be true
.
For more information, see QR Code Scanning Guide.
Migrate Return Assistant
Digital invoice onboarding screen
The new digital invoice onboarding screen uses the global UI customization options. You can discard the earlier screen-specific customizations.
For more information, see Onboarding Screen.
New Features
Bottom navigation bar
To show a bottom navigation bar, pass true to GiniBankConfiguration.shared.bottomNavigationBarEnabled
. There is a default implementation, but you can also use your own by implementing the DigitalInvoiceOnboardingNavigationBarBottomAdapter
interface and passing it to GiniBankConfiguration.shared.digitalInvoiceNavigationBarBottomAdapter
.
Custom illustration view
If you want to animate the illustrations on the onboarding pages, implement the OnboardingIllustrationAdapter
interface to inject a view that can animate images (for example, Lottie
) and pass it to the digitalInvoiceOnboardingIllustrationAdapter
when configuring the GiniBankConfiguration.shared
instance.
Digital invoice overview screen
The new digital invoice overview screen uses the global UI customization options. You can discard the earlier screen-specific customizations.
For more information, see Overview Screen.
Breaking changes
We removed the ability for users to manually add additional articles. We also removed the info box.
New features
Bottom navigation bar
To show a bottom navigation bar, pass true to GiniBankConfiguration.shared.bottomNavigationBarEnabled
. There is a default implementation, but you can also use your own by implementing the DigitalInvoiceNavigationBarBottomAdapter
interface and passing it to GiniBankConfiguration.shared.digitalInvoiceNavigationBarBottomAdapter
.
Digital invoice edit article screen
The new edit article screen uses the global UI customization options and is presented as a bottom sheet on phones and as a dialog on iPad. You can discard the eralier screen-specific customizations.
For more information, see Edit Article Screen.
Breaking changes
We removed the ability to deselect the article from this screen.
New features
Easier currency and amount input when editing an article. We added validation and showed the error messages for the article name and price input fields.
Digital invoice help screen
The new help screen uses the global UI customization options. You can discard the earlier screen-specific customizations.
For more information, see Help Screen.
New features
Bottom navigation bar
To show a bottom navigation bar, pass true to GiniBankConfiguration.shared.bottomNavigationBarEnabled
. There is a default implementation, but you can also use your own by implementing the DigitalInvoiceHelpNavigationBarBottomAdapter
interface and passing it to GiniBankConfiguration.shared.digitalInvoiceHelpNavigationBarBottomAdapter
.