Input Mask for Phone Number

jjmcm123 said 1 year, 1 month ago:

I selected the phone number data type for a database but would like to be able have an mask in the widgets that I would use to input and search the database. How do I create the phone number input mask, such as (***)*** – **** ?

DS said 1 year, 1 month ago:

Hey @jjmcm123,

Are you looking for some type of formatting phone number data types? Currently we don’t have a setting like this but we have discussed it and would be willing to take suggestions as to what formats we would support. When taking other countries and extensions into consideration, there are a lot of ways this could be implemented.

As for searching, there are more robust search options than exact match. You can have partial match (wildcard) by searching for something like 505*, near match (fuzzy) by searching for something like 505~, or boolean searches using some thing like “505″ AND “8877″, “505″ OR “480.”

I hope that helps.

DS

jjmcm123 said 1 year ago:

DS, thanks for your response. I am looking for an input field mask for phone numbers to ensure a specific match to the database. Currently if I input just the number, it will not match the number in database if it has hyphens (ex: 5551212 will not match 555-1212). So I was asking about the input mask to make sure the format of the number will match number and format in database.

DS said 1 year ago:

@jjmcm123,

Is this for a search widget? You could create a lookup table with the existing phone numbers on your phone number column.

Can I see the website you’re working on?

DS

jjmcm123 said 1 year ago:

Yes please http://www.findnewhomeonline.com/321Direct.html
ex: input 123-456-7890 and 1234567890 into search. You will notice different search results.

DS said 1 year ago:

Hey jjmcm123,

Sorry, I didn’t see this post. Okay I have an idea that may work for what you are trying to do. Try this out.

In Data Tables:
1. Move the Company Phone Number column to the very first column. Only the first column of a table can be used for a lookup table. Another solution may be to create a new table that contains only the phone numbers.

In your Search Widget:
1. On the right, under “Search Fields,” check the Company Phone Number checkbox.
2. Click on the rectangular Search preview box that now should say “Company Phone Number.” This should bring up the control properties.
3. Select the Field Type DropDown.
4. Select the “Add options from Lookup Table” radio button.
5. Select the table you’re using for this widget. You should notice that the dropdown is now populated with the phone numbers.
7. Change the Field Label to whatever you want that to say. Also make sure your columns are still in the correct order. Move those around as necessary.
6. Save and and preview.

Let me know if that helps. Hopefully those tricks will give you some more flexibility.

DS

jjmcm123 said 11 months, 2 weeks ago:

DS, thanks for your response. However, I am looking to make this work without using a drop down box. Instead of an input mask, perhaps you can help me with a different approach:
Separate a typical phone number into 3 fields (area code, prefix, number) instead of one field.
In a search, the phone number would be entered into three fields and need to match all 3 to bring up a result.
What I would need is for the search field to display the 3 fields on the same row, such as (field1)xxx (field2)xxx (field3)xxxx.
How would I accomplish this?

jjmcm123 said 11 months, 2 weeks ago:

DS, and hopefully to clarify, link to sample widget https://datawidgets01.secureserver.net/widgetbuilder.php?type=preview&name=Test3651212
Three fields, on one line, with field name for field 2 and 3 to be a “-” to mimic phone number structure.

jjmcm123 said 10 months ago:

@DS any feedback to the last 2 posts here?

DS said 10 months ago:

@jjmcm123,

You would do that with CSS. I’m no master of CSS but here’s something to get you started:

.Data_Central_Control1 {
float: left;
width: 10%;
white-space: nowrap;
overflow: hidden;
}
.Data_Central_Control2 {
float: left;
width: 35%;
white-space: nowrap;
overflow: hidden;
}
.Data_Central_Control3 {
float: left;
width: 55%;
white-space: nowrap;
overflow: hidden;
}

Let me know what you think of that,

DS

jjmcm123 said 10 months ago:

@DS thank you. And not to sound like an amateur (but I am!), can/how this code be added to the widget code? I added this code to the website, but it changes the properties of all widgets on all pages. I would want it to change the layout on one specific widget.

DS said 9 months, 3 weeks ago:

@jjmcm123If you want the CSS to be only for a specific widget then you must wrap the
widget code with a <div> element using an unique id. Ex:
<div id="widgetname">
 
<script>...</script>
</div>
Then you must prefix the CSS rules with the #id. This makes it so the rules
apply only to that one specific widget. Ex:
#widgetname .Data_Central_Control1 { ... }
#widgetname
.Data_Central_Control2 { ... }
#widgetname .Data_Central_Control3 { ...
}


Let me know if that helps,

DS