Question Re: UI5 input prefix in Technology Q&A

UI5 input prefix

former_member966252 — Wed, 30 Nov 2022 17:12:09 GMT

Hello, I'd like to add a prefix to an input field. This prefix should not be editable/selectable by the user i.e. the cursor should simply start at the end of this prefix. This is simply to let the user know how the final input will look like; for example, when creating an e-mail name some websites show the @domain.com behind the user's input. I want exactly that just in front of the input. Does anyone know how I would be able to achieve something like this? Every idea is much appreciated

Re: UI5 input prefix

AlexGourdet — Wed, 30 Nov 2022 17:12:30 GMT

Thank you for visiting SAP Community to get answers to your questions.

As you're looking to get most out of your community membership, please consider include a profile picture to increase user engagement & additional resources to your reference that can really benefit you:

Profile https://developers.sap.com/tutorials/community-profile.html
Tips for Questions: https://community.sap.com/resources/questions-and-answers
Consider to take our Q&A tutorial at: https://developers.sap.com/tutorials/community-qa.html.

I hope you find this advice useful, and we're happy to have you as part of SAP Community!

All the best,

Alex

Re: UI5 input prefix

Margot — Wed, 30 Nov 2022 17:56:11 GMT

I would say the Mask Input field is a good fit for what you are describing. Check out the code for the Product activation key field in the corresponding sample, this should be a good start.

Re: UI5 input prefix

former_member966252 — Thu, 01 Dec 2022 12:05:29 GMT

Thanks a lot for the help! I have looked into MaskInput fields and it seems like one has to specify a fixed length of characters but that's not what I want. Do you know any workaround for that?

Re: UI5 input prefix

former_member966252 — Thu, 01 Dec 2022 12:05:43 GMT

Also, there seems to be a bug where the 'a' character is somehow seen as a maskformatSymbol? only happens with that character. Plus, when binding the mask to an object from a model and this value gets updated, the object value gets appended to the mask instead of replaced resulting in very weird behavior. Are you aware of this? If so, how can I fix this?

Re: UI5 input prefix

n_hristov97 — Fri, 02 Dec 2022 09:19:48 GMT

Hi Alex,

Unfortunately sap.m.MaskInput offers only fixed-length mask, so you cannot use it in cases where you need various-length input. For your use case you can use a combination of label and regular input, like in this snippet.

Also, inside you can find how to deal with small 'a' - it is not a bug - 'a' and '9' are default mask rules, where 'a' corresponds on regex "[A-Za-z]", and '9' corresponds on regex "[0-9]". If you want to use these symbols as immutable, you can escape them by prepending with ^ character, something like: mask: "^addon-xxxxxx".

For the problem with binding - I am not sure what is exact case, so can you provide some snippet that demonstrates the issue?

Best Regards

Nikolay Hristov