Customize options selection

2025-04-11 03:20

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 Android IAPMiniProgram SDK is version 2.65.1 or later. For more information, see SDK release notes.

Procedure

To customize the "options" selector, take the following steps:

Step 1: Implement the `GriverOptionsPickerExtension` interface

Create a class that implements the GriverOptionsPickerExtension interface. Within the class, override the showOneOptionPicker function and the showTwoOptionPicker function accordingly. Refer to the following code for a sample implementation.

For more information about the interface and its methods, refer to the GriverOptionsPickerExtension interface.

copy
class CustomOptionsExtensionImpl : GriverOptionsPickerExtension {

    override fun showOneOptionPicker(
        activityWeakReference: WeakReference<Activity>,
        title: String,
        options: Array<String>,
        selectedIndex: Int,
        resultCallback: GriverOptionsOnePickerResultCallback
    ) {
        // Customize the UI to display a single-column picker/selector
    }

    override fun showTwoOptionPicker(
        activityWeakReference: WeakReference<Activity>,
        title: String,
        optionsOne: Array<String>,
        selectedOneIndex: Int,
        optionsTwo: Array<String>,
        selectedTwoIndex: Int,
        resultCallback: GriverOptionsTwoPickerResultCallback
    ) {
        // Customize the UI to display a two-column picker/selector
    }
}

Step 2: Register the `CustomOptionsExtensionImpl` class

After initialize the SDK, call the registerExtension API to register the CustomOptionsExtensionImpl class.

copy
IAPConnect.init(application, initConfig, object : InitCallback {
    override fun onSuccess() {
        //···
        Griver.registerExtension(GriverExtensionManifest(
            GriverOptionsPickerExtension::class.java,
            CustomOptionsExtensionImpl()
        ))
    }
})

Interfaces

`GriverOptionsPickerExtension` interface

The GriverOptionsPickerExtension interface defines functions for the super app to customize the "options" selector UI. Refer to the following code for the interface definition:

copy
interface GriverOptionsPickerExtension : GriverExtension {

    /**
     * UI displays a single-column picker:
     *
     * @param activityWeakReference Activity class
     * @param title                 the selector title 
     * @param options               the options list
     * @param selectedIndex         the index of the default option that is selected
     * @param resultCallback        the callback
     */
    fun showOneOptionPicker(
        activityWeakReference: WeakReference<Activity>,
        title: String,
        options: Array<String>,
        selectedIndex: Int,
        resultCallback: GriverOptionsOnePickerResultCallback
    )

    /**
     * UI displays a two-column picker:
     *
     * @param activityWeakReference Activity class
     * @param title                 the selector title 
     * @param optionsOne            the options list of the first column picker 
     * @param selectedOneIndex      the index of the default option that is selected in the first column picker
     * @param optionsTwo            the options list of the second column picker 
     * @param selectedTwoIndex      the index of the default option that is selected in the second column picker
     * @param resultCallback        the callback
     */
    fun showTwoOptionPicker(
        activityWeakReference: WeakReference<Activity>,
        title: String,
        optionsOne: Array<String>,
        selectedOneIndex: Int,
        optionsTwo: Array<String>,
        selectedTwoIndex: Int,
        resultCallback: GriverOptionsTwoPickerResultCallback
    )
}

The following table lists the details of the defined functions:

Function	Required	Description
showOneOptionPicker	Yes	Called by the SDK to render the UI to display a single-column selector.
showTwoOptionPicker	No	Called by the SDK to render the UI to display a double-column selector.

showOneOptionPicker function

This function has the following input parameters whose values are passed by the SDK.

Parameter	Data type	Required	Description
activityWeakReference	WeakReference<Activity>	Yes	A weak reference to `Activity` that provides a context required for UI rendering.
title	String	No	The selector title.
options	Array<String>	Yes	The options list.
selectedIndex	int	Yes	The index of the default option that is selected.
resultCallback	GriverOptionsOnePickerResultCallback	Yes	The callback that returns the "options" selector or handles cancellation.

GriverOptionsOnePickerResultCallback

copy

interface GriverOptionsOnePickerResultCallback {
    fun onSuccess(selectedIndex: Int)
    
    fun onCancel()
}

Method	Required	Description
onSuccess	Yes	The callback that returns a single-column selector. For details, refer to `onSuccess`.
onCancel	Yes	The void callback that is triggered when the user cancels the operation.

onSuccess

Parameter	Data type	Required	Description
selectedIndex	Int	Yes	The index of the selected option.

showTwoOptionPicker function

Field	Data type	Required	Description
activityWeakReference	WeakReference<Activity>	Yes	A weak reference to `Activity` that provides a context required for UI rendering.
title	String	No	The selector title.
optionsOne	Array<String>	Yes	The options list of the first column selector.
selectedOneIndex	int	Yes	The index of the default option that is selected in the first column selector.
optionsTwo	Array<String>	Yes	The options list of the second column selector.
selectedTwoIndex	int	Yes	The index of the default option that is selected in the second column selector.
resultCallback	GriverOptionsTwoPickerResultCallback	Yes	The callback that returns the "options" selector or handles cancellation.

GriverOptionsTwoPickerResultCallback

copy
interface GriverOptionsTwoPickerResultCallback {
    fun onSuccess(selectedOneIndex: Int, selectedTwoIndex: Int)
    
    fun onCancel()
}

Method	Required	Description
onSuccess	Yes	The callback that returns a double-column selector. For details, refer to `onSuccess`.
onCancel	Yes	The void callback that is triggered when the user cancels the operation.

onSuccess

Parameter	Data type	Required	Description
selectedOneIndex	Int	Yes	The index of the selected option in the first column selector.
selectedTwoIndex	Int	Yes	The index of the selected option in the second column selector.

Customize options selection

Default user interface

Before you begin

Procedure

Step 1: Implement the GriverOptionsPickerExtension interface

Step 2: Register the CustomOptionsExtensionImpl class

Interfaces

GriverOptionsPickerExtension interface

showOneOptionPicker function

GriverOptionsOnePickerResultCallback

onSuccess

showTwoOptionPicker function

GriverOptionsTwoPickerResultCallback

onSuccess

Step 1: Implement the `GriverOptionsPickerExtension` interface

Step 2: Register the `CustomOptionsExtensionImpl` class

`GriverOptionsPickerExtension` interface