---
title: "Passer des données aux flows dans le SDK Kotlin Multiplatform"
description: "Passez une valeur de votre application Kotlin Multiplatform à un flow, et affichez-la dans un élément texte."
---
> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skill. Claude Code (self-updating via plugin): `claude plugin marketplace add adaptyteam/adapty-skills && claude plugin install adapty-skills@adapty` — other tools: `npx skills add adaptyteam/adapty-skills --all`
Un [tag personnalisé](flow-custom-tags) est une variable personnalisée dont la valeur provient de votre application. Après avoir sélectionné **Value comes from outside the app** dans les paramètres d'une variable, votre application peut définir sa valeur via le SDK Adapty. Par exemple, un élément texte contient « Coins : » et un tag personnalisé. Si votre application passe « 120 » pour le tag, les utilisateurs voient « Coins : 120 ».
## Avant de commencer \{#before-you-start\}
Vous avez besoin du SDK Adapty v4 ou version ultérieure. Les versions antérieures à v4 n'affichent pas les flows.
## Ajouter des balises personnalisées au flow \{#add-custom-tags-to-the-flow\}
Pour afficher les valeurs de votre application dans un flow, configurez des tags personnalisés dans le builder :
1. [Créez un tag personnalisé](flow-custom-tags#create-a-custom-tag) pour chaque valeur que votre application transmet.
2. [Insérez chaque tag dans un élément texte](flow-custom-tags#add-a-custom-tag-to-a-text-element).
3. Notez le nom complet de chaque tag, groupe compris. Le code de votre application transmet chaque valeur sous ce nom. Par exemple, si le groupe `user` contient un tag `streak`, le nom complet du tag est `user.streak`.
## Transmettre des valeurs de balises personnalisées \{#pass-custom-tag-values\}
Transmettez les valeurs de votre application au paramètre `customTags` de `AdaptyUI.createFlowView` ou `createNativeFlowView`, sous forme de `Map` :
- Chaque clé est le nom complet d'une balise personnalisée, par exemple `user.streak`.
- Chaque valeur est la chaîne affichée aux utilisateurs à la place de la balise.
- Chaque valeur doit être lisible par un humain, par exemple « 1 250 », et non « 1250.0 ». Adapty ne la formate ni ne la traduit.
Le SDK lit les valeurs une seule fois, lors de la création de la vue, elles ne changent donc pas pendant que le flow est ouvert.
```kotlin showLineNumbers title="Kotlin Multiplatform"
viewModelScope.launch {
val customTags = mapOf(
"username" to "DragonSlayer42",
"coins" to "1,250",
)
AdaptyUI.createFlowView(
flow = flow,
customTags = customTags,
).onSuccess { view ->
view.present()
}.onError { error ->
// handle the error
}
}
```
Pour intégrer le flow dans un layout Compose, passez le même paramètre `customTags` au composable `AdaptyUIFlowPlatformView`. Si vous passez une map `customTags` différente, le composable crée une nouvelle vue et les utilisateurs reviennent au premier écran du flow.
```kotlin showLineNumbers title="Kotlin Multiplatform (Android)"
val customTags = mapOf(
"username" to "DragonSlayer42",
"coins" to "1,250",
)
val nativeView = AdaptyUI.createNativeFlowView(
context = context,
viewModelStoreOwner = activity,
flow = flow,
observer = myFlowObserver,
customTags = customTags,
)
```
```kotlin showLineNumbers title="Kotlin Multiplatform (iOS)"
val customTags = mapOf(
"username" to "DragonSlayer42",
"coins" to "1,250",
)
val nativeView = AdaptyUI.createNativeFlowView(
flow = flow,
observer = myFlowObserver,
customTags = customTags,
)
```
Pour tester vos tags personnalisés, ouvrez le flow dans votre application, après avoir ajouté le code qui définit leurs valeurs. Le canevas du builder et l'[aperçu sur les appareils](paywall-device-compatibility-preview#preview-on-devices) n'affichent que les valeurs initiales : l'application mobile Adapty ne définit pas les valeurs des tags personnalisés.
Si votre application définit déjà des valeurs de balises personnalisées pour les paywalls de l'ancien Paywall Builder, consultez [en quoi les balises personnalisées dans les flows diffèrent](migrate-to-flows#custom-tags-from-the-old-paywall-builder).
## Ce que voient les utilisateurs sans valeur \{#what-users-see-without-a-value\}
Les utilisateurs voient la **valeur initiale** d'un tag personnalisé en guise de valeur de secours dans les cas suivants :
- Votre application ne transmet aucune valeur pour le tag.
- L'utilisateur n'a pas mis à jour votre application vers une version qui transmet la valeur.
- Le nom dans le code de votre application ne correspond pas au nom complet du tag, y compris la casse.
- Un autre tag personnalisé dans le même élément de texte n'a pas de valeur. Dans ce cas, tous les tags personnalisés de cet élément de texte affichent leur valeur initiale.
Pour n'afficher rien à la place d'un tag, transmettez une chaîne vide. Adapty considère une chaîne vide comme une valeur, donc la valeur de secours n'apparaît pas.
## Exemple : afficher un IMC à partir des réponses de l'onboarding \{#example-show-a-bmi-from-onboarding-answers\}
Un flow peut collecter des réponses des utilisateurs, et un tag personnalisé peut afficher une valeur provenant de votre application. Combinez les deux pour montrer aux utilisateurs un résultat que votre application calcule à partir de leurs réponses, comme un score, un plan recommandé ou une métrique de santé :
1. Un flow collecte les réponses et les envoie à votre application.
2. Votre application calcule le résultat.
3. Votre application transmet le résultat au flow suivant sous forme de valeur de tag personnalisé.
Dans cet exemple, un flow d'onboarding collecte le poids et la taille de l'utilisateur. Quand l'utilisateur ferme le flow d'onboarding après son dernier écran, votre application calcule son indice de masse corporelle (IMC). Ensuite, elle ouvre un flow de paywall qui affiche l'IMC.
### Configurer les flows \{#set-up-the-flows\}
1. [Créez deux flows](paywall-builder-templates) : un flow d'onboarding qui collecte le poids et la taille de l'utilisateur, et un flow de paywall qui affiche son IMC.
2. Ajoutez deux champs [**Number**](builder-inputs-and-forms) au flow d'onboarding :
- Un pour le poids en kilogrammes, avec l'**Element ID** `weight`.
- Un pour la taille en centimètres, avec l'**Element ID** `height`.
Pour les deux champs, définissez le **Format** sur **Integer**. Un champ envoie sa valeur sous forme de texte, exactement tel que l'utilisateur l'a saisi, et l'[exemple de code](#pass-the-bmi-to-the-paywall) ne lit pas « 70.5 » et « 70,5 » de la même façon. Les nombres entiers n'ont pas de séparateur décimal, donc le code les lit de la même manière quelle que soit la locale.
3. Pour vous assurer que votre application reçoit bien les deux valeurs, terminez le flow d'onboarding par un écran sans champs de saisie. Sur cet écran, ajoutez un bouton avec l'action [**Close flow**](onboarding-actions#close-flow). Les champs envoient leurs valeurs lorsqu'ils perdent le focus ou lorsque l'utilisateur passe à un autre écran. L'action Close flow ne les envoie pas. L'exemple de code n'ouvre le paywall que si l'utilisateur a atteint le dernier écran.
4. Dans le flow de paywall, [créez un tag personnalisé](flow-custom-tags#create-a-custom-tag) nommé `bmi`. Dans le champ **Initial value**, saisissez un tiret (`—`). Les utilisateurs verront ce tiret si votre application ne transmet aucun IMC.
5. Ajoutez un élément texte avec les mots « Your BMI: » au flow de paywall. Après ces mots, [insérez le tag personnalisé `bmi`](flow-custom-tags#add-a-custom-tag-to-a-text-element).
6. Ajoutez le flow d'onboarding à un [placement](placements), par exemple `onboarding`. Ajoutez le flow de paywall à un placement avec l'ID `bmi_paywall`. Le code de la section [Transmettre l'IMC au paywall](#pass-the-bmi-to-the-paywall) récupère le paywall via cet ID.
### Transmettre l'IMC à la paywall \{#pass-the-bmi-to-the-paywall\}
Collectez le poids et la taille à partir des événements `flow_user_input` du flow d'onboarding, comme indiqué dans [Traiter les données des flows](kmp-flow-input). Pour savoir que l'utilisateur a atteint le dernier écran, surveillez un événement `flow_screen_showed` avec `is_last_screen` défini à `true`, comme indiqué dans [Suivre les vues d'écrans du flow](kmp-flow-screen-views). Lorsque l'utilisateur ferme le flow d'onboarding après cet écran, calculez l'IMC. Créez ensuite la vue de la paywall et transmettez l'IMC pour le tag personnalisé `bmi`.
La méthode `flowViewDidReceiveAnalyticEvent` analyse les paramètres d'événement avec la bibliothèque `kotlinx.serialization.json`. Si votre projet ne dispose pas encore de cette bibliothèque, ajoutez `org.jetbrains.kotlinx:kotlinx-serialization-json` aux dépendances de votre application. Ensuite, implémentez les méthodes suivantes sur l'observateur que vous enregistrez avec `AdaptyUI.setFlowsEventsObserver` :
```kotlin showLineNumbers title="Kotlin Multiplatform"
class MyFlowsEventsObserver(
private val scope: CoroutineScope,
) : AdaptyUIFlowsEventsObserver {
private val bodyAnswers = mutableMapOf()
private var reachedLastScreen = false
override fun flowViewDidReceiveAnalyticEvent(
view: AdaptyUIFlowView,
name: String,
paramsJsonString: String,
) {
if (name != "flow_user_input" && name != "flow_screen_showed") return
val params = Json.parseToJsonElement(paramsJsonString).jsonObject
if (name == "flow_screen_showed") {
if (params["is_last_screen"]?.jsonPrimitive?.booleanOrNull == true) {
reachedLastScreen = true
}
return
}
val elementId = params["element_id"]?.jsonPrimitive?.content ?: return
val value = params["value"]?.jsonPrimitive?.contentOrNull ?: return
bodyAnswers[elementId] = value
}
override fun flowViewDidDisappear(view: AdaptyUIFlowView) {
// The observer receives events from every flow. Reset `bodyAnswers` and
// `reachedLastScreen` whenever a flow disappears, so that the paywall
// doesn't open again when the user closes it.
val answers = bodyAnswers.toMap()
val finished = reachedLastScreen
bodyAnswers.clear()
reachedLastScreen = false
// Number inputs send their values as strings.
if (!finished) return
val weight = answers["weight"]?.toDoubleOrNull() ?: return
val height = answers["height"]?.toDoubleOrNull()?.takeIf { it > 0 } ?: return
val heightInMeters = height / 100
val bmi = weight / (heightInMeters * heightInMeters)
val bmiText = ((bmi * 10).roundToInt() / 10.0).toString()
scope.launch { showBmiPaywall(bmiText) }
}
}
suspend fun showBmiPaywall(bmi: String) {
Adapty.getFlow(placementId = "bmi_paywall").onSuccess { flow ->
AdaptyUI.createFlowView(
flow = flow,
customTags = mapOf("bmi" to bmi),
).onSuccess { view ->
view.present()
}.onError { error ->
// handle the error
}
}.onError { error ->
// handle the error
}
}
```
`toString` utilise toujours un point comme séparateur décimal : « 22.7 ». Pour utiliser le séparateur de la locale de l'utilisateur, formatez l'IMC avec un formateur adapté à chaque plateforme, comme `java.text.NumberFormat` sur Android et `NSNumberFormatter` sur iOS.
### Enregistrer l'IMC dans le profil de l'utilisateur \{#save-the-bmi-to-the-users-profile\}
Pour afficher différents flows aux utilisateurs en fonction de leur IMC, enregistrez-le comme [attribut personnalisé](kmp-setting-user-attributes#custom-user-attributes) de leur profil. Dans l'Adapty Dashboard, [créez un attribut personnalisé de type **Number**](segments#custom-attributes) avec la clé `bmi`. Affichez ensuite chaque flow à une [audience](audience) construite à partir de cet attribut.
Appelez la méthode `updateProfile` dans `flowViewDidDisappear`, juste après la ligne qui calcule `bmi`. Passez ce `Double`, et non la chaîne formatée, afin qu'un segment puisse comparer l'IMC à un seuil :
```kotlin showLineNumbers title="Kotlin Multiplatform"
val params = AdaptyProfileParameters.Builder()
.withCustomAttribute("bmi", bmi)
.build()
scope.launch {
Adapty.updateProfile(params).onError { error ->
// handle the error
}
}
```