(NE) Custom Field Placeholders

[EL PaperBoy]

How to use (NE) Custom Field Placeholders


The following information is provided to assist you with using the application - if you need assistance then post in the application's support topic and provide an indication of what field it is that you want to configure


What is a 'Placeholder'?


A placeholder is used to display a textual hint which describes what should be entered in to an input field, and is displayed when the field is empty. As the user enters content in to the field, the placeholder disappears from view.


What fields in the IPS Community Suite support this?


Some fields added by developers using the IPS 'Form Helper' functionality (i.e. the majority of fields) can support this attribute. These are:

• Text
  
• Email
  
• Password
  
• Search
  
• Tel
  
• Url
  
• TextArea (see Note #1 at the base of these instructions)
  
• Key/Value
  

How to configure a placeholder?


It is not possible for a list of all fields in the IPS Community Suite to be collated together in a nice and simple configuration page - configuration is going to require you to get hands-on with figuring out information about the input field which you want to affect.


How do I do this?


Most browsers now have an 'Inspect Element' option to determine information about a HTML element. It is this functionality which will be used to obtain the information needed to configure a placeholder for a field. Firstly, you need to determine the ID of the field which you want to affect as follows:

1. Right click on your chosen input field
   
2. Click on 'Inspect Element'
   
3. Your browser will display the HTML code for the page, focussing on your chosen item
   
4. The 'id' information is what is needed here. It will begin with one of the following:
   • 
     elInput_
     
   • elTextarea_
     
5. Note the 'id' information for the field and discard the 'elInput_' or 'elTextarea_' to retrieve the id which can be used to target the field with a new placeholder
   

Example - getting the ID of the main title field on the 'New Topic' form in the Forums application

1. The HTML code for the field is: <input type="text" name="topic_title" value="" id="elInput_topic_title" aria-required="true" maxlength="255">
   
2. The 'id' for the field is elInput_topic_title
   
3. We discard the elInput_ from the id to give topic_title
   

View attachment 160733View attachment 160734​

 ​

Create a new placeholder in the application

1. Click on 'Add placeholder'
   
2. Enter the id information e.g. topic_title
   
3. Enter the text which you would like to display in the field
   
4. Click Save
   
5. Go and take a look at the result
   

Notes

1. "TextArea" does not mean "Editor"
   • 
     the editor fields on IPS are provided using CKEditor, which has its own 'Placeholder' functionality using a CKEditor plugin and requires additional configuration. This functionality is entirely outside of the scope of this application.
     
2. If a developer has already added a placeholder to a field then this application will not replace it - the chances are that they have implemented a language string for the placeholder, so if you wish to change the text displayed in an existing input field then search for it in your Languages.
   

View the full article