Introduction:
Mastering user interfaces and enhancing user experience are paramount in app development. Facilitating number inputs effectively through a user-friendly slider-text control is a clear goal of this article, which will guide you through creating such a component, integrating it into an existing edit form, and mastering this feature.
Some application creators aim to simplify number entry for users. By connecting text input and slider controls into a user-friendly slider-text control, users can seamlessly select a value using the slider, updating the corresponding text input. Conversely, inputting a number into the text box will update the slider to reflect that number.
Leveraging a variable, this design becomes implementable. Nowadays, the gold standard for creating such features involves wrapping the functionality inside a component. This modular approach ensures that the user-friendly slider-text control can be used across various applications, boosting efficiency and uniformity.
Creating the “Connected Slider-Text Input Control” Component
Start by creating a new component and insert both a text input control and a slider control. For enhanced reusability, you should add this new component to a component library, as recommended by Microsoft’s official documentation.
Subsequently, introduce these 3 custom properties:
- MaximumValue – Dictates the slider control’s maximum selectable value.
- Default – An input property determining the component’s default value.
- Value – An output property that yields the numeric value users input into the component.
Ensure that the ‘Raise OnReset when value changes’ checkbox is activated for both the MaximumValue and Default properties.
Configuring the Slider Control
Initiate the component by binding the Default property to a variable with the following formula:
Set(varValue, Self.Default)
When users adjust the value using the slider, immediately update the variable value. You must set the slider control’s OnChange property to:
Set(varValue, Self.Value)
Also, you should specify the slider’s maximum value by setting its Max property to:
Parent.MaximumValue
Furthermore, assign the slider’s Default property to: varValue.
Configuring the Text Input Control
Whenever users modify the value using the text input, promptly update the variable value by changing the text input control’s OnChange property to:
Set(varValue, Value(Self.Text))
Clearly define the text input control’s default value by setting its Default property to:
Text(varValue)
To ensure only numeric entries, set the Format property to ‘Number’.
Configuring the Output Property
Finally, set up the component to return the chosen value by tapping into the properties of the component. You need to set the “Value (Output)” property to: varValue.
Implementation: Adding the Component to an ‘Edit’ Screen
To demonstrate the integration, add this component to an app designed using the ‘start with data’ feature. Strategically place the component, named comTextSlider_1 for this example, outside the automatically generated EditForm to avoid limitations with form controls.
Link the component’s Default property with the existing value by setting it to:
Coalesce(CurrentItem.Bedrooms, 0)
When saving the selected value, make sure to include the ‘bedroom’ field in the form using the form editor’s Fields section. Directly set the Update property of the ‘bedroom’ card to:
comTextSlider_1.Value
For a cleaner look, you can hide the card.
Conclusion
This guide has provided detailed instructions on creating a component that enables users to input numeric values with interconnected text input and slider controls. More importantly, it has illustrated how to seamlessly incorporate this user-friendly slider-text control into a pre-defined app. If you’re facing challenges or require assistance regarding this guide or any other technical concerns, don’t hesitate to contact us. We’re here to assist you, ensuring you achieve the best possible results.
