String, Number and date formatting in Servoy

We’ll be talking about string operations, kind of formatting strings, merging text, programmatic operations. I have a few demos here and I will spare you guys some slides because I prepared this webinar only this morning before in the last couple hours. So, yeah, we’ll skip the slides and we’ll just do some demos some explanation. I hope you guys have some good questions. So, away we go. In my other browser tab, I have the ng client running and I’m going to take you guys through some formatting examples. I will show you how the format was applied and we’ll look back at the IDE under the hood and we’ll see what was done there. So, let’s start with dates. This is a pretty common one. In default, your dates get formatted no matter what because we have to display them as text as something. But as you all know, a date really encodes a lot more information than what you see in the text. You get a date object is up to the millisecond and of course it includes things like time zones and that sort of thing. So, how to display your date. By default, it gets formatted and this is perhaps one thing that a lot of people don’t understand is that no matter what your date gets formatted. So, you might as well do something with it. The default, if you do nothing, will be that the date is in the locale of the user who’s using. So, I’m in the US and it’s going to show me the US format which is month day, year and it’s going to give me the AMPM. So, you can see that month day due to your AMPM is the default locale format. Now, if you want to enforce a date format globally in your application, you can go to your server admin page. And I will do that with the local host, Servoy admin. And right at the top you will see default date format. You can put in something. I will put in still the US format but minus the time, for example. And also a for digit here. I’m going to save the settings. Now, I do have to relaunch my client for that to take effect. Just do that real quick. And you can see now that it’s showing the for digit year and also no time. So, at the very least, if you want to force a date format onto your users, then you can do that. Now, of course, we can override that on a column by column basis for database tables and also on a field by field level in the UI. So, let’s take a look. We have a basic format here and I’m going to take you under the hood and show you what it looks like. So here I have applied that format, but I’ve also set the input format. The format is really a string property. So you can always set it directly as the string. But if you’re like me, you can never get it right the first time. So you should use the editor. And you can see that for dates, we can specify a standard date or type in our own, a standard format or type in our own. And also what kind of edit format you want. So let’s say I want to allow my users to just type in the numbers without the separators. So you can see, as I click in the field, the separators go away and I can go ahead and type a date without any separators. And once I leave the field, it will format it over on the right hand side. You can see I’m showing the raw value. An example that I see a lot is where people want to sort of leave the separators there so that while a user types in the date, they can kind of forget about the separators because sometimes the users confuse the user. The user’s confused about whether or not she or he should type in the separators. So in the next example, you have here, you can see that as I start typing in the date, the separators are filled in for me and it prompts me what I should put in there. In the separator example, you can see that it’s followed by the mask property. So if we look at this in the editor, once you’ve entered the display format, if you check this checkbox to use the mask, it’ll sort of put the apply the input mask while your user’s typing. For example, I have applied a placeholder and so this could be a character or one character that gets repeated or a sequence of characters that will get substituted in all of the places. And so I can see what this looks like in the UI. You can see that as I clear the field. So as I’m typing, you can see that it gets replaced. And the data’s entered. The thing we might want to do is separate date and time, although date and time are in a single column or single in this case, this is bound to a form variable. The value stores both the date and the time is a single single data type. However, it’s common to see that split up or you choose a date and then you choose a time, even though it’s really talking to the same data provider. And what we can do is apply a time format. And you can see for this format, I’ve applied hours and minutes and I’ve put in a placeholder here and I’ve applied the input mask. So if we want to take a look at what happens there. So this date was starting at midnight, but I can go ahead and put in a time say 1110. And you can see that well, if I show the raw value, then you can see how it’s stored, but it’s stored all in one object. I can do this probably by putting this back to the default, which will show my locale. So if I relaunch the client. Now you can see that it’s going to show the time. In the raw value, this is a. 24 hour time format, you can also change that to use the. The common North American format. Which has the the AM PM. Good substitute that in. I put in two characters for that. I think it’s just one. Can ever remember. The nice thing is that as you make changes, you can see the client is broadcasted to and I don’t have to do any kind of rebuilding or anything. So now you can see that I can enter the time. So, you can see that the same thing is a bit tricky. Oh, I need to change to the lower case. So you have to change the number format as well as the AM PM and then you get kind of your North American notation. You get the idea. So you can see that in my display format, I show for it as a year, but on the input I accept it to do your year. I’ve had this request a lot in the past on how to do this. It is possible, but I would say be careful because you can see that if I put in say, you know, 19, it goes to 2019. So I say it’s a date of birth and I put in someone who’s born in 1929 and it’s interpreting that as 2029. So you have that kind of Y2K issue going on there. If I put something more in the recent past, say 1977 it determines it. So you can see that there’s actually a cycle of when the start of the century is in the date formatting. It’s configurable, but your users don’t know what it’s going to be. So I would say be very careful with this. This kind of input. I’ve had people insist that they have to have it anyway. So if you do, then just be careful. Okay, let’s move on from dates to formatting numbers. So here we have a data type, which is say holding a dollar amount. So if you have an example of a default, again, it’s going to take your low cow if you have no other formatting. So I’m in the North American format. So the separators, the comma and the decimal is the period. And say a European format, they get reversed. So of course, if I was in a European locale on my machine here, it would switch it dynamically for me without any work. Again, like the date format, you can override that on the app server and push this to your client. So I could specify a number format and then insist that clients see it in a specific way. And there’s use cases for that. Let’s take a look at a basic format. So even I would point out that even if you apply no format, you can see that this truncates to three digits in the decimal place over here. So I can override that in my, like I said, in my server configuration, or I can apply it directly on the field. But by default, your number is always format whether or not you like it. So you might as well pick a format at least globally. And down below here though that it it formats it with the five seven it also is rounding in the format, even though the underlying value that gets stored in the database is still is still the three digit. If we look at the form the number format example. You can see that we specify the separator with a comma the interval at which we separate separate the thousands and then the decimal place holder, you can invert these and get the European format, for example. And also limiting it to two decimal places. I could increase that. And upon saving this, you can see now that the full number is shown. So you can configure the number of decimal places the separator and the decimal character. Of course, you can add a currency symbol. If you want to just let it default to the user’s locale you’ll insert this currency symbol as a prefix. Now what some people will do is they don’t want to use the the default currency. Or the default locale is the currency because it’s maybe they’re actually storing the currency and then they really want to put it into the format. In that case, you can you can prefix it with a real character. So I think this should work. So you can see that it doesn’t use my local but it does use dollar hard coded. So you can prefix any hard code any prefix that you want into your format. So the way if I want to enter the number in here, you can see that when I select in the field that the currency symbol goes away and I can just enter my raw value. With as many decimals as I want. And again, it reformats when I leave field. We can format percentages as well. If nothing else and just put the percentage it actually will go in front of the number. Common format that I see is where it goes after so you can put a prefix here with the number of digits that you want and percentage sign. Again, you don’t have to have the percent in the input part as well. So you can see when I click in the field. So if I put in something else 99% for example, it will reformat it when I leave the field. So do scientific notation. So for say a large number here like a 9 billion something. We can force scientific notation and you have some control over how big of a number you need before it gets formatted. But you can see that once I click in the field again I’m free to type whatever number I want. And then you can see the tab out you can see it it casts it back to the scientific notation. The format or for that looks a bit like this you can see the display format is showing the number of digits that you want to have before it’s going to going to go to scientific notation and then this is indicates that you’re going to do the scientific notation and this is the exponent here. Okay, let’s move on to formatting text values. So a lot of numbers are stored in databases as text. Yet they need to carry with them or show some kind of format. A simple example would be something like a phone number. So North American phone number. We want to have say we want to have the country calling code and then and then the 10 digit phone number we separate it 3 3 and 4. So you can see that as I as I clear the field and I start typing again it gives me the input mask I’m just sort of forcing the plus one country code in there so that there’s no confusion you don’t have to type it. So we can decide to store it or not. And you can see that only go field it reformats it. An example I see sometimes in in ERP systems for example accounting systems where they have a chart of accounts and they have really specific formats for account numbers. Like part of a company code concatenated with an account number or something like that. From time to time we get that and the user needs to enter it in a specific format and we might want to reformat it when they leave so let’s take a look under the hood at the string formats we have here. So the phone format. Look something like this so. We have the numbers we have whatever separators we want in there. And we have a placeholder you saw the X that was being replaced there. Works just like the the date and the number formaters. But for example this. This strange account number format say we want to force that the user can enter any letter for the first two spaces and then any number for for the last three. So here we’re going to do you you which means it’s going to push it it’s going to force it to upper case to so any letter and it gets forced to upper case. This is the place where this is what the user sees that gets replaced as they type. So if we look at how this works. I’m typing lower case be. And lower case be again. You can see it’s replacing it and it’s also forcing it to upper case if I type anything other than a number here it won’t take so here you can hear I’m typing some letters it’s not going in I need to put a number. Like that. Once I and I can’t once I exceed the length or hit the length you can hear and I’m typing more and it stops it right at that strict format. So we see this a lot in an older ERP systems and it’s a good way to force the kind of data entry that you want of course your users should also be trained and know that format but that’s usually the case with those kinds of systems. Another example of that in this one. Is showing it with the placeholder but in this case it’s really going to restrict what you can substitute for the asterisk so so here the asterisk means that this will get replaced with what something the user enters. Again this is just what the user sees as they’re typing and it’s replaced. These are the values that are allowed to be typed in the place of these two asterisks so here what we’re saying is anything in the first two characters from this set a b or c and then any number after that for three characters. Let’s take a look in the client so here I’m going to put a a c and you can see that it works if I type in a D. It won’t accept it and then of course any number it’ll take but nothing else and then it’ll truncate it after the five digits so that really forces the user to put in the correct format. This is where the formats don’t do everything that you want for that you can have a custom UI converter. So we have an example of that. In the custom conversion example. You can see that for the format. I’m going to use a UI converter and I don’t know why this gets truncated there’s actually three things here it gets cut off at the bottom. But I’ll show you the methods so it actually runs it through your own code and it passes in the value that is coming in from the UI and how you want to store it back to the database or back to the data provider and then also the other direction so as it’s coming out of the database how do you want to format it so so it’s displayed in the why. And you just hook it up to these two methods to sort of scrub it on its way in and out. So I’ll jump into the code here and show you those methods. You can see that on the way from the database to the UI we’re going to format it this is going to be a numeric value and so and I’m doing a bit of programmatic formatting here and I wanted to use this an example to also point that out. So we’re going to format this number just as a normal North American format number and say we’re doing kilograms so we’re going to add KG to it on the way out. Just just to do that on the way back in we’re going to accept a numeric input and we’re going to we’re going to parse out a number from it if they’ve entered a number. So let’s have a look what this looks like in the UI. So you can see that the value in the database or in this case of form variable is one two three I could do. Add a decimal to it you can see that it’s formatting it over here so if the raw value. changes say record per record you can see that it’s it’s formatted here here if I just enter in some numbers. You can see on leave a field it it gets formatted again because it gets it goes back to the database but then it it calls that that method again to reformat it as well. So really it’s just passing it through to make sure that you have a chance to do whatever you need to both on the way into the database and on the way out of the database. I would stress that that using the UI converters is not a very common occurrence so. I would first look for all other ways to do formatting before doing that a common approach is also to use a calculation and just return if it’s if it doesn’t require data input just return a calculated value that does the format. So it’s a common handy when you absolutely needed the other thing I would point out here is that we’re calling you tills dot number format. This is a base API that you get with Servoy. You tills can do number formatting date formatting string formatting for you. So we’re sort of programmatically doing here what we normally do statically in the UI. For example, here I want to show that that formats can be dynamic so what you’ve seen so far is that I apply a format at design time to a field, but you can change formats at runtime if you want. I tried to make up a little use case for that here and what I’m doing is again I have a phone number I want to select a country and then based on what I select I’m going to change the format. We have a North American number here. I’m going to pick Netherlands and as I start typing in here I get the Dutch country calling code sort of substituted in there for me and I think this is the right format I had to look it up. They have one one less digit than we do when I put in the the Dutch phone number so here’s how we can dynamically change formats. So this was actually was the use case that prompted me to do the webinar we had some questions about formatting phone numbers and this came up so I thought I’d show this one that you can dynamically switch it in code. It looks like this. So let’s follow the data change event of that country code. So when we choose between one or the other and we apply it directly to the elements so elements dot phone that’s the text field that holds the phone number and that format is just a string property and it gets applied. We can we can apply it dynamically and if it’s us we do this format and if it’s the other one which is Netherlands format. So that’s how we can do dynamic formatting. So we have other examples of working with text we’re going to move away from formatting now to working with text in merging and sort of programmatic processing and a few examples of that here as well. So you can show text in Servoy you can mash it up with data, you can mash it up with formatted data, you can mash it up with HTML markup and you can mash it up with internationalization so dynamic language translations. We did a whole other webinar on what we call 18 and or internationalization a few months ago so hit the archives if you want to know more about that. So I’m just going to see here on the other items I just mentioned. So looking at this form right here I would want you guys to notice that a couple of things as I click through the records you can see that I have some text up here and down here which is data drift and also down at the bottom. So these are labels and in particular they are mashing up plain text with with data driven text so you can see the order and then the number and then the customer up here and then down here the order items and then the actual number of order items that are on the order and then down below you can see the order total and then the formatted dollar amount. So let’s have a look at that under the hood. I am going to go to the form called order detail and I have a look at this and I use the wireframe viewer here you can also view it in the HTML five editor. But it’s a bit faster to sort of click around and show you what is what here. So let’s take a look at the header label this is just a plain label that you can drag and drop on your form. But if we look at the text that goes in here you see this sort of mishmash of tags and text if we click on this we get the text editor. And this is a standard editor that you get anywhere you can show text and you can edit it in Servoy you get this editor so this applies not just to labels but anywhere you can see text. And you can see what I’ve done is I’ve sort of concatenated the plain text order with the order ID of the record the current record. And so when you saw that I switched I didn’t have to write any code to handle the record selection change or whatever this just applies to the current record. And again you can pick anything from your data model so you can see that when I want to find the customer name I use a relation and I use that to get my company and I can just sort of find the tag I want here and double click and it inserts it over here. One thing to notice that you have to also click the display tags checkbox here otherwise it will literally display the percent percent whatever and it doesn’t get it doesn’t get dynamically substituted. So you want to make sure you do that. Down here, same thing, the only difference is that I would. I would show you that I use a tag here if I go to my orders to order details related found set and I go down to standard tags. I can pick the max record index or lazy max record index they give you the same thing it’s just how they’re loaded is different. And you can see that it pops that tag over when I double click on it so that gets substituted in there and it evaluates the size of that related found set telling me the number of order items I have. Down on the bottom here it’s the same thing, however, I would point out that this is just showing a calculation which gives me a formatted value and I’ll jump into that in a second. I would also point out that we’re starting to sneak a little bit of HTML markup in here to to embolden the or you can see on the on the client. That the order total here is a little bit bold and that’s done by just sort of sneaking a little bit of markup here, so you can inject markup anywhere you have text as well and sort of mash it in with all the other stuff that you’re doing and I have a better example of that in a minute. Let’s take a quick look at that order total. I think it’s display order total. This is a calculation which looks kind of like a feel but it runs some code and again I’m calling that utils dot number format and giving it my currency format here along with the separator and the decimal and the number of places to separate that so again. Sometimes we need to format numbers and dates and things, but you need to do it at runtime and show it somewhere dynamically and so you want to call that utils, you know formatting API and if you put that in a calculation it shows up everywhere just like a data provider so you can you can pop it into some merge text and use it there. I’m going out that that everywhere else here we’re applying format as well. One thing that I wanted to show you guys. For example, notice the order date I formatted this with the international standard year month day and I want to point out something on that form. I’ll switch to the HTML view real quick. So on this form if I select the date column here and look at the properties you’ll notice that I didn’t specify a format. You’ll also remember that my format my default format for the server that I was pushing the clients was the North American format month day year. How did your month day get into this column because I did that on purpose and the way this works is you can set a default format. I got to move my go to meeting thing my way. There we go. I can set a default format at the column level so now we’re looking at the orders table if I select order date you can see that the default format here is your day month. It should be here month day. Anyway, so that overrides the server setting and the locale, but it is overridden by anything that I if I put a format directly on that field it would then override the column level, but this is really nice if you have certain this works really well for numbers to because some numbers are currencies other numbers are, you know, metric weights or something like that. So if you want to do that at the column level that’s a really convenient place to make sure that it gets formatted everywhere in your application the way you want to. Another trick that I would point out this is a maybe an advanced tip here. You can integrate this with I 18 n and instead of putting a literal format here you can put an I 18 n key that gets translated dynamically into a format. Then you can have different. Low cat different formats applied specifically on a column by column level depending on the locale. So you could have a different, you know, phone number format applied that way or a different weight measure applied that way or something like that currency etc. So if you look at some markup examples I’m getting a bit over time so I’ll speed up here and then we’ll take questions I got just two more examples. You saw a little bit that I was putting some bold around one of those labels. I just want to show you that you can mash up data and HTML however much you want so you can see here if I change this value. As I tab out you can see the the green area here is showing it highlighted and then it gives you the rest. Take a look at what that looks like in. Oh what’s the name of the form. This guy. So you can see first of all that I just drop a label on here. Anywhere that you can put text you can mix markup and data and HTML markup and data and international text. And you can see here that I put the tag which gets substituted this is just coming from a form variable. And then I put a bit of markup here and I use a style class from my attached style sheet just around the the variable and then I put some some plain text here. And some people really take this take advantage of this and they put really nice formatted HTML pieces throughout their application but they’re dynamically substituting in whatever data they need or whatever localize strings they need. And you also notice that all I need to do is bind this text field to the data provider which was just a form variable I call text. And everything else happened automatically there’s no need to catch the change event and code and refresh the label or or anything like that it’s just data bound and that’s already preformatted and it just works. Last example. I call this dynamic tags for lack of a better word but again I’m just trying to show in these examples that the things that you can do at design time you can also do programmatically. So the example I have here’s I don’t know let’s say it as I double click on one of these. I want to see some order info in a dialogue here and you can see it’s showing me a bit about each one of these orders, who the customer was the date and the dollar amount let’s have a look at the code. And that is dynamic tags on cell double click so i’m handling the event on that grid when we click on it and you can see here that I just make a little array of messages the thing that I would point out here is this is just plain plain string inside I have the tag that you would have put in the editor somewhere and of course I’m putting a little bit of markup around it to to embolden the value. I just sort of put these in a ray and then I call dot join which is a standard method of a JavaScript array which concatenates all the items of the array with a string and in this case I use the break tag again that’s a bit of markup so that they’re separated by new lines. And so that gives me a string here called messages. Then I call this this is that utils library again and I call replace tags and so what that does is it takes all of these percent percent tags. And it replaces them dynamically with a value from a context the context being whatever you pass in is the second argument so right now it’s the found set and really the current selected record of the found set. and then you can get replaced, but you could that could be some record that you got passed in from somewhere else etc, so. Point is is anytime you want to dynamically substitute data into some text that you’re going to see somewhere in the eye and you’re doing it programmatically use this string replace tags it’s pretty nice you can have fully. So this would be like email templates or something you could have the user to find their own email templates with nice markup and etc, and if they just put in the tags here like dear first name last name etc dynamically you just call this replace tags and it gets filled in. Finally, I just show it in a dialogue here and and it just shows up nice in the UI like that. That is my final example I do see we have some questions and we’re a bit over time so y’all on what do we have. So I’m a pretty detailed overview of everything with formatting and merging of text so that’s quite helpful for the archives. A couple of questions is one here from Tony and. He has an example that I’ve seen many many years in the past and other environments and can you allow the entry of a custom text that then can be converted to a date for example in a date field enter a tea and it gets converted to today. That’s convenient yeah so so not in a standard format that you just stick in at design time but if you create one of those custom converters and those can be global methods that you could reuse throughout your application then you can apply that to to be handled anywhere. Where you want to enter a date you can accept that format and and convert it right so with a custom converter you can build anything and you can make it as insane as you want to. Exactly. And his full off question is can you enter just the day part of a date and leave the rest out and tab out. And then I’ve had autofield sorry I have a date he’ll the only put in 12 and it takes the 12th of the current month. Yeah I don’t know if you you might be able to put in just dd as your format and then it it will just change the date of an existing date for an empty date I don’t know what happens. You’d have to try it out regardless if it doesn’t work you can again use a custom UI. Okay so yeah if you want to go very crazy then use a custom converter and build whatever you want to. And can you use a regular expression. You can use a regular expression for formatting and for matching. However the regex won’t be applied in the client as they’re typing so if you have some regex and it will only accept things they type if they match the regex and it will do it real time. That would have to be done in a custom component but of course you can apply it after the fact. Through a custom converter and we’ve seen that before where you you check the regex against the. What was entered say a an email or something so this would be on leave of field for example you get it right away that you can you can match that to the regex and know if it if it matched or if it didn’t. And the question from Richard can you display a list of invoice values with the correct currency symbol for each customer. Yes, the it depends on where you store the currency. But again you can see that you can sort of mash up data driven stuff together. Probably I would just do that in a calculation where you get the currency symbol for the customer and you can catenade it with a formatted. a dollar amount for the field that you want to you want to format and and you return it as that if you need to accept input well then you probably don’t want to accept a currency symbol. On the input so you would just take a normal numeric input the currency is stored separately. Okay. Well guys last minute to ask any final questions that you have does any of this apply to tool tips. Yes, that was one example that I wanted to get to, but I ran out of time preparing this stuff and by the looks of the time I kind of cram too much content and here anyway but again the point is anywhere you can show text and Servoy it can be mark up it can be data driven it can be localized and it can all be mashed together. So we apply to tool tips as well so we see some customers do some very nice tool tips say you hover over an order here and it shows a nice HTML formatted summary of that order. That’s a nice way to use tool tips and everything that you just saw.

Close