Skip to main content
Version: 5.5

ItemSelector customization

If you want to fully customize this component we recommend copying the code into your Mealz template configuration. You can remove the code you do not override.

itemSelector{
    header {
         view = MyCustomItemSelectorHeaderView()
    }
    search {
         view = MyCustomItemSelectorSearchView()
    }
    selectedItem{
         view = MyCustomItemSelectorItemSelectedView()
    }
    success {
        view = MyCustomItemSelectorSuccessView()
    }
    loading {
         view = MyCustomItemSelectorLoadingView()
    }
    empty {
         view = MyCustomItemSelectorEmptyView()
    }
}
class MiamTemplateManager {
    init {
        MiamTheme.Template 
        {
         // <---- copy above code here 
        }
    }
}
templating success templating loading templating empty

The Header is the first customizable component on the ItemSelector at the very top of the page; to create your own ItemSelector header you create a class that implements ItemSelectorHeader

import ai.mealz.sdk.components.itemSelector.header.ItemSelectorHeader
import ai.mealz.sdk.components.itemSelector.header.ItemSelectorHeaderParameters


class MyCustomItemSelectorHeader: ItemSelectorHeader {

    @Composable
    override fun Content(params: ItemSelectorHeaderParameters) {
        // Your custom design here 
       
    }
}

Header params​

data class ItemSelectorHeaderParameters(
    val title: String,
    val previous: () -> Unit // back to previous page 
)

To create your own Search template you create a class that implements ItemSelectorSearch

import ai.mealz.sdk.components.itemSelector.search.ItemSelectorSearch
import ai.mealz.sdk.components.itemSelector.search.ItemSelectorSearchParameters


class MyCustomItemSelectorSearch: ItemSelectorSearch {

    @Composable
    override fun Content(params: ItemSelectorSearchParameters) {
        // Your custom design here 
       
    }
}

Search params​

data class ItemSelectorSearchParameters(
    val ingredientName: String, // current ingredient needed in recipe to replace 
    val ingredientQuantity: Int, // current ingredient needed quantity in recipe
    val ingredientUnit: String, // current ingredient unit (litre , grammes ...)
    val searchPlaceholder: String, 
    val onChanges: (String) -> Unit
)

Selected Item​

To create your own Search template you create a class that implements ItemSelectorSearch

import ai.mealz.sdk.components.itemSelector.selectedItem.ItemSelectorSelectedItem
import ai.mealz.sdk.components.itemSelector.selectedItem.ItemSelectorSelectedItemParameters


class MyCustomItemSelectorSelected: ItemSelectorSelectedItem {

    @Composable
    override fun Content(params: ItemSelectorSelectedItemParameters) {
        // Your custom design here 
       
    }
}

Selected Item params​

data class ItemSelectorSelectedItemParameters(
    @Deprecated("Use other parameters instead")
    val selectedItem: Item, // contains all the information but will not be maintained
    val name: String,
    val brand: String,
    val imageUrl: String,
    val description: String,
    val price : Double,
)

Selected Item resources​

tip

you can replace and reuse string resources if you want to take advantage of our internationalisation system ex : Localisation.itemSelector.selected.localised

Name Resource IDValue FrValue Eng
selectedcom_miam_item_selector_selectedSélectionnéSelected

Loading​

To create your own itemSelector loading template create a class that implements ItemSelectorLoading

import ai.mealz.sdk.components.itemSelector.loading.ItemSelectorLoading


class MyCustomItemSelectorHeader: ItemSelectorLoading {

    @Composable
    override fun Content() {
        // Your custom design here 
       
    }
}

Success​

To create your own Success template you create a class that implements ItemSelectorSuccess

import ai.mealz.sdk.components.itemSelector.success.ItemSelectorSuccess
import ai.mealz.sdk.components.itemSelector.success.ItemSelectorSuccessParameters


class MyCustomItemSelectorSuccess: ItemSelectorSuccess {

    @Composable
    override fun Content(params: ItemSelectorSearchParameters) {
        // Your custom design here 
       
    }
}

Success params​

data class ItemSelectorSuccessItem(
    val name: String,
    val brand: String,
    val imageUrl: String,
    val description: String,
    val price : Double
)

data class ItemSelectorSuccessParameters(
    @Deprecated("Use itemSelectorItems instead")
    val items: List<Item>,
    val itemSelectorItems: List<ItemSelectorSuccessItem>,
    val previous: () -> Unit,
    val select: (Item) -> Unit
)

Success resource​

tip

you can replace and reuse string resources if you want to take advantage of our internationalisation system ex : Localisation.itemSelector.select.localised

Name Resource IDValue FrValue Eng
selectcom_miam_item_selector_selectSélectionnerSelect

Empty​

Item selelector is using default Empty page view

Empty resource​

Resource are passed in thanks to title and subtitle field in EmptyParameters

tip

you can replace and reuse string resources if you want to take advantage of our internationalisation system ex : Localisation.itemSelector.notFoundTitle.localised

NameResource IDValue FrValue Eng
notFoundTitlecom_miam_item_selector_not_found_titleAucun produits trouvés pour cette recherche.No products found for this search.
noSubstitutioncom_miam_item_selector_no_substitutionAucun produits de substitution trouvésNo substitute products found
notFoundSubtitlecom_miam_item_selector_not_found_subtitleEssayez avec un autre mot-clé.Try another keyword.