In this tutorial, you’ll learn how to display toast notifications in a Mendix Native app. Toasts are small popup messages that give quick feedback to users, such as success, error, or warning messages.
Go to MX Studio Pro Create a new module ToastNotification.
Go to the domain model & add a new NP entity(Toast) with below attributes.
i) Message
ii) IsVisible(ByDefault false)
Right Click on ToastNotification module -> Add page -> Native mobile & give the name Toast -> Inside navigation layout select NativePhone_Default(Atlas_Core).
Go to the Toast page & take a dataview -> double click on dataview select nanoflow as DataSource & create a new nanoflow(DS_Toast).
Open DS_Toast nanoflow -> take a create object activity & create Toast object & return the object.
Go to Toast page -> Take a text widget -> Select Message by {1} & set the visibility visible if true.
Take a button & give the name Show Toast.
Double click on Show Toast button -> In onClick events select call a nanoflow & create a new nanoflow(ACT_ShowToast).
Open ACT_ShowToast nanoflow
1.Take a change object activity -> select $Toast object & set its values Message & IsVisible(true).
2. Take a Wait activity & set time in milliseconds to keep the toast visible for that time.
3. Take again a change object activity -> select $Toast object & change the IsVisible to false.
4. Lastly , Go to ToastNotification Page -> double click on text & set class Toast & add following code in main.js file
export const Toast = {
container: {
position: "absolute",
top: 150,
paddingHorizontal: 25,
alignSelf: "center",
height: 45,
borderRadius: 50,
justifyContent: "center",
backgroundColor: "#00BAA3",
opacity: 0.9,
zIndex: 999999,
},
};
Go to Navigation -> Native mobile & add a new item(Toast) and select Toast page.
Now run the application & test it.
Conclusion:
I hope this article has helped you understand How to Show Toast Notification In Mendix Native App.
Thanks for reading this! See you in the next blog post.