How to add icon in the input field

Hi I am a complete newbie to AppGyver (and also a newbie to coding). I am building an app interface which needs an icon in the input field (email address field - the icon is a small mail along with the placeholder).

How do I add icons inside the input field as placeholder? Please help.

Many thanks in advance.

Welcome to AppGyver, Rahul!

I don’t believe that ability is natively supported, but perhaps @Harri_Sarsa, @Mevi, or @Tomi_Laakso could kindly comment on that. It’s an interesting concept.

I’m assuming you mean a literal icon placeholder similar to a text placeholder which disappears as soon as the person starts typing. You could try and nest your input inside a container, and then nest your icon component of choice also inside that container with the icon’s position set to Absolute. You could then position the icon near the approximate location of where the first character would be typed (be sure to set your icon’s Z-index higher than the input if it appears behind it when set to Absolute).

A quick one-way street approach is to get the “Hide Component” function from the Flow Function Market and attach it to the “Component onChange” function in the logic editor for your input. Set the component to be hidden to the name of your icon. I’ve just tested this myself and it does, indeed, work in hiding my icon as soon as I type, similar to a placeholder.

I say this is a one-way street approach because it’s only triggered once to hide the icon when the first first character is entered into the input. Being here for only about two months myself, I’m not quite experienced enough with formulas to make a dynamic approach which could hide the icon when a character is typed and show it if all characters are deleted from the input like with native text placeholders.

If you’re good with the icon not appearing again after the user has begun typing (even if they delete all characters), that’ll work. If not, again, perhaps, one of the fine AppGyver team members tagged above could clarify.

Addendum: I’ll try a formula or two on my side to see if we can find something for a dynamic approach (since this would be an interesting idea for my own web app), but no guarantees.

1 Like

That’s amazing, @Dominik_Greene. Thank you so much for your detailed answer! I will definitely try this, but ideally I would want something that functions completely as a placeholder, i.e. vanishes when the user types in the field and appears again when there are no characters in the input field. Nonetheless, the “one-way street approach” is really helpful. Many thanks :slight_smile:

1 Like

@Dominik_Greene has a good answer for this :+1:

I’d just change one thing here. I think It’s better to bind component visibilities to some variable than using Hide/Show component Flow functions. This makes the app logic easier to follow and it’s easier to customise it later.

So add the icon with absolute position to the same place as the Input field is. Then bind it’s visible property to this type of Formula:

IS_EMPTY(pageVars.inputValue)

This means the icon will be visible when inputValue is empty, i.e. when placeholder should be visible.

This tutorial might be useful to you: https://docs.appgyver.com/tutorials/input-validation and if you want to make that single Input into a new view component you could start here: https://docs.appgyver.com/ui/creating-and-editing-components

2 Likes

Hey, @Rahul_Nambiar, Tomi hit it out of the park with this one. :slight_smile: I’ve just tested it out and this is your solution perfectly! I knew IS_EMPTY would play a key role in the formula, but I always over-complicate it when experimenting with formulas!

Since Tomi’s info wouldn’t have been clear to me on quite how to do this a few weeks back, I just want to clarify with a quick tutorial for you and anyone else who may stumble upon this:

  1. Have your container, input, and icon positioned as explained in my first post.

  2. Go to the Variables > Page Variables tab and click Add Page Variable. Leave its “Variable Value Type” on Text, but give it a unique name.

  3. Go back to the primary editor and click your input field. In the Properties tab to the right-hand side of the editor click the button left of the Value field, as indicated in this screenshot:

  4. In the popup window, click “Data and Variables”, then click “Page Variables”, then select the page variable you created in Step 2. In this case, I created a throwaway variable called “testiconvar”. Select the appropriate variable and click the green Save button. Example:

• Note that once you attach your page variable, the Value field of your input will appear as it does in the first image above, with the name of your variable (i.e. “testiconvar”) inside the rectangular box.

  1. Now, select your icon and, in the Properties tab, scroll down, if necessary, and expand the Advanced Properties section to where you see the Visible ‘true/false’ selector. As before, click the button to the left of this field and, in the popup, select Formula. Click the field and type or copy/paste the formula Tomi provided. In my case, it looks like:

Be sure to set the pageVars.testiconvar text to whatever the name of your page variable. So if you named your page variable “awesomeicon”, phrase it as pageVars.awesomeicon. That part can be a bit confusing to newcomers – been there, done that! :slight_smile:

  1. I believe that’s it! Ultimately, your input field will probably look something like this:
    Screenshot 2020-11-09 100506
    In this case, the blue border is actually the container with padding set to make it clearly visible (and easier to click when styling). I changed the radius of the input field to round the corners a bit. The icon was changed to a paper airplane and set to pink to help differentiate it. It’s normal to see the bound page variable text in the input field in the editor!

  2. Save your work and then open in one of the preview options. Let us know if it works for you!

Big thanks to @Tomi_Laakso! Learned something new myself here! :slight_smile:

3 Likes

@Tomi_Laakso amazing! Thank you so much for your answer. Much appreciated!

@Dominik_Greene thanks again. You are a gem! I haven’t done it yet, but am pretty sure with what you have explained it should be easy! One more question, the end product has a top bar (saying Home) and a bottom footer. How can I remove this? Many thanks in advance :slight_smile:

1 Like

Happy to help!

Very easy! Go to the Navigation tab on your global toolbar and select the fields for both Navigation Header Bar and Navigation Menu and set “Enabled?” to No. Be sure to save.

You can also set a page in the Navigation Menu field’s options to force your app to load a specific page in the preview even if you disable the menu visibly appearing in the preview. I use this during the UI-building portions of our project for building and testing elements when a lot of page refreshing is necessary. Just keep that in mind for your final build – you may want to eventually set it to load on a welcome page for new users, etc.

1 Like

@Dominik_Greene Thanks again! However it gives me errors (a red screen with lot of errors) when I disable “Navigation Menu”.

Here is the error:

CONTEXT: App, TIMESTAMP: 1604944563179, MESSAGE: undefined is not an object (evaluating ‘t[F].params’) E@index.android.bundle:941:1097
getStateForAction@index.android.bundle:941:2671
w@index.android.bundle:923:1070
map@[native code]
E@index.android.bundle:923:1619
getStateForAction@index.android.bundle:923:1864
getStateForAction@index.android.bundle:1029:1486
w@index.android.bundle:923:1070
map@[native code]
E@index.android.bundle:923:1619
getStateForAction@index.android.bundle:923:1864
k@index.android.bundle:908:1746
Vn@index.android.bundle:93:31970
di@index.android.bundle:93:48923
Ml@index.andr

You need to set an Initial Page

1 Like

Stepped away for a while. Have you had any luck with John’s suggestion?