Customize options selection
The super app can customize the "options" selector UI within mini programs to ensure a consistent user interface. The selector appears when mini programs call the my.optionsSelect JSAPI to enable users to select items, e.g. select a payment date.
Default user interface
The following figure shows the UI examples of the default "options" selector:
- Left figure: UI displays a single-column selector.
- Right figure: UI displays a double-column selector.
Before you begin
Ensure that the integrated iOS IAPMiniProgram SDK is version 2.65.0 or later. For more information, see SDK release notes.
Procedure
To customize the "options" selector, take the following steps:
Step 1: Implement the GRVOptionsSelectDelegate protocol
Create a class that implements the GRVOptionsSelectDelegate protocol. For more information about the interface and its methods, refer to the GRVOptionsSelectDelegate protocol.
class DemoOptionsSelectImpl: NSObject, GRVOptionsSelectDelegate {
func showSingleOptionsPicker(with param: GRVSingleOptionsSelectParam, finishHandler: @escaping (Int) -> Void, cancelHandler: @escaping () -> Void) {
// Customize the UI to display a single-column picker/selector
}
func showDoubleOptionsPicker(with param: GRVDoubleOptionsSelectParam, finishHandler: @escaping (Int, Int) -> Void, cancelHandler: @escaping () -> Void) {
// Customize the UI to display a two-column picker/selector
}
}Step 2: Configure optionsSelectDelegate
After initialize the SDK, configure the optionsSelectDelegate to register the GRVOptionsSelectDelegate protocol.
Refer to the following code for a sample configuration:
let extensionDelegate = GRVExtensionDelegate()
extensionDelegate.uiProvider.optionsSelectDelegate = DemoOptionsSelectImpl()Protocol
GRVOptionsSelectDelegate protocol
The GRVOptionsSelectDelegate protocol defines functions for the super app to customize the "options" selector UI. Refer to the following code for the interface definition:
@protocol GRVOptionsSelectDelegate <NSObject>
/// Display a custom single-column picker
/// - Parameters:
/// - param: Parameter
/// - finishHandler: Completion handler (receives the selected index)
/// - cancelHandler: Cancel handler
- (void)showSingleOptionsPickerWithParam:(GRVSingleOptionsSelectParam *)param
finishHandler:(void(^)(NSInteger selectedIndex))finishHandler
cancelHandler:(void(^)(void))cancelHandler;
/// Display a custom dual-column picker
/// - Parameters:
/// - param: Parameter
/// - finishHandler: Completion handler (receives the selected indices for both columns)
/// - cancelHandler: Cancel handler
- (void)showDoubleOptionsPickerWithParam:(GRVDoubleOptionsSelectParam *)param
finishHandler:(void(^)(NSInteger firstSelectedIndex, NSInteger secondSelectedIndex))finishHandler
cancelHandler:(void(^)(void))cancelHandler;
@endThe following table lists the details of the defined functions:
Function | Required | Description |
showSingleOptionsPickerWithParam:finishHandler:cancelHandler: | Yes | Defines the data for customizing the UI to display a single-column selector. |
showDoubleOptionsPickerWithParam:finishHandler:cancelHandler: | No | Defines the data for customizing the UI to display a double-column selector. |
showSingleOptionsPickerWithParam:finishHandler:cancelHandler: function
This function has the following input parameters whose values are passed by the SDK.
Parameter | Data type | Required | Description |
param | Yes | The information about the single-column selector. | |
Function | Yes | A callback function that returns a single-column selector. | |
cancelHandler | Function | Yes | A callback function that is triggered when the user cancels the operation. |
GRVSingleOptionsSelectParam
Refer to the following code:
@interface GRVSingleOptionsSelectParam : GRVOptionsSelectParam
/// current View Controller
@property (nonatomic, weak, nullable) UIViewController *currentViewController;
/// Header title information
@property (nonatomic, copy, readonly, nullable) NSString *title;
/// Default selected value (default value 0)
@property (nonatomic, assign, readonly) NSInteger selectedIndex;
/// Options list
@property (nonatomic, copy, readonly) NSArray<NSString *> *options;
@endParameters:
Parameter | Data type | Required | Description |
currentViewController | UIViewController | No | Indicates the current UI viewer controller. |
title | NSString | No | Indicates the selector title. |
selectedIndex | NSInteger | Yes | Indicates the index of the default option that is selected. |
options | NSArray | Yes | Indicates the options list. |
finishHandler function
This function has the following parameters:
Parameter | Data type | Required | Description |
selectedIndex | NSInteger | Yes | The index of the option that is selected. |
showDoubleOptionsPickerWithParam:finishHandler:cancelHandler: function
This function has the following input parameters whose values are passed by the SDK.
Parameter | Data type | Required | Description |
param | Yes | The information about the double-column selector. | |
Function | Yes | A callback function that returns a double-column selector. | |
cancelHandler | Function | Yes | A callback that is triggered when the user cancels the operation. |
GRVDoubleOptionsSelectParam
Refer to the following code:
@interface GRVDoubleOptionsSelectParam : GRVOptionsSelectParam
/// current View Controller
@property (nonatomic, weak) UIViewController *currentViewController;
/// Header title information
@property (nonatomic, copy, readonly, nullable) NSString *title;
/// Default selected value for the first column (default value 0)
@property (nonatomic, assign, readonly) NSInteger firstSelectedIndex;
/// List of options for the first column
@property (nonatomic, copy, readonly) NSArray<NSString *> *firstOptions;
/// Default selected value for the second column (default value 0)
@property (nonatomic, assign, readonly) NSInteger secondSelectedIndex;
/// List of options for the second column
@property (nonatomic, copy, readonly) NSArray<NSString *> *secondOptions;
@endParameters:
Parameter | Data type | Required | Description |
currentViewController | UIViewController | No | Indicates the current UI viewer controller. |
title | NSString | No | Indicates the selector title. |
firstSelectedIndex | NSInteger | Yes | The index of the default option that is selected in the first column selector. |
firstOptions | NSArray | Yes | The options list of the first column selector. |
secondSelectedIndex | NSInteger | Yes | The index of the default option that is selected in the second column selector. |
secondOptions | NSArray | Yes | The options list of the second column selector. |
finishHandler function
This function has the following parameters:
Parameter | Data type | Required | Description |
firstSelectedIndex | NSInteger | Yes | The index of the option that is selected in the first column selector. |
secondSelectedIndex | NSInteger | Yes | The index of the option that is selected in the second column selector. |