New WEBDEV site: Look & Feel Examples

New WEBDEV site: Look & Feel Examples

I am working on a new site and we are refining the look and feel for it, the priority and goal for the site is to be as clean and simple as possible. It will be 100% consumer facing. So far we have done a Mobile First style login page, we are undecided if the rest of the site will be responsive, mobile first, adaptive, or separate pages, we have to work out more of the primary design first.

Anyway I wanted to show a few of the things we have worked out that might inspire you or better yet let you share better ways to achieve them, and if you stick with me to the end I will also share a challenge with you that I haven’t been able to crack, hopefully, someone out there has.

Let’s start with the Mobile First Log in Page. This site will be a portal site, launched off a marketing site, similar to the “my account” type sites many companies have today. So it is simple and doesn’t need to introduce the company or anything.

Note we are only asking for one piece of info, we are not asking for the password, more on that in a future post. As you can see it is just a small login screen that centers itself, similar to the style that has become popular with many sites. We will talk about the styling of the edit control in a moment but first lets talk about the page in general

It is very small only 300 wide and 364 tall, and the page is set to grow in both Width and Height base on the browser size.

The page background is set to CSS, so no image border junk, and just has a slightly off white background

The cell which is the visible container of the page is anchored in the center with a fixed width and height.

And finally to keep it from looking really small on high end smartphones we set some viewport settings on the Advanced tab of the page

The details of those settings are:

width=device-width, height=device-height, initial-scale=1.0, maximum-scale=2, user-scalable=yes

And this is what the page looks like on a Pixel 6 Pro

Now on to the style of the edit controls. You will notice the edit control when it has focus the caption is smaller and at the top of the control, when empty and not in focus the caption fills the control instead.

The key to making this work is two settings available on the Caption (CSS) Element, wet set Position to “Instead of hint text” and Position if control not empty to “At the top of input area”

Note there is no background or border and the font size is specified in pixels. I have written about this before, pixel is actually not a fixed unit, but a “magic” unit based on the rendering device. 1 pixel represents the smallest dot the human eye can see on the screen, on an older monitor this might really be a 1 x 1 pixel, but on a high-end smartphone it might actually be 3 x 1.75 pixels. But the beauty is you don’t have to think about it, each device will manage it for you.

The input area is where our real work is. We need to click on the + overrides link and do our configuration there

We start with the normal state and the Text Tab, nothing earth shattering here just set the size, again using px, the color and the alignment

We don’t do anything with the background tab, all of it is off, but on the border tab we set it for a complete border, the color we desire, along with the width and rounded corner settings. You can change these to what works for you, you must might also need to make other changes as we move along to make everything match.

No Shadow, Effects, or Animations, but we do want to set a 2px left margin so the text isn’t right against the border

And on the advanced tab we want to add some CSS code to add 12 px of padding to the top. You might be wondering why we don’t do that on the Margin tab since that gets set as padding. The issue is that setting affects everything and also shoves our caption down. By doing it in the custom area, it only affects the input text and moves it down a bit making more room for the caption, allowing me to have the height of my edit controls at 45, without this setting I had to have them at 55 or 60 to not crowd the caption and the input.

padding-top: 15px !important

The only other State we need to change settings for is the Edit state. We make the border 2 px wide instead of 1.

And we add a shadow, which draws attention to the control current in focus

Note to make all of this work the edit control size is also adjusted so there is no caption area. That is it for the basic edit control, now let’s talk about error handling a bit, but first a minor degression, I really wished we had a little more control over toast messages, I would love to do this type of error with toast. I had hoped that using ToastDisplayPopup was going to be the answer, but you are still only allowed to set the Horizontal and Vertical to Left, Right, or Center, so you are able to place the error so it shows right next to the offending field. Maybe in v28, a developer can dream, can’t he? Anyway back on track, this is what we settled on for our error handling.

The edit control border turns red, and there is a small error also shown in red at the bottom with a warning icon. The downside is we have to include that static in our design, I suppose we could try doing it with some really fancy CSS or even clone control, but not every field needs specific validation so we have settled on this. There is nothing really fancy about the static (Note: this is a Rich Text Area Control and not a simple Static Control), for sanity’s sake we name it the same as the edit control just changing the prefix, so edtEmailMobile and errEmailMobile in this example. The color is set to Red, 12 px so it is smaller than our normal text, and there is a bit of padding (2px top and 5px left) that help with the Icon font positioning. I gave some tips on Icon font in a previous article, so be sure to check it out if you aren’t familiar. We set the error static to be invisible initially so we can unhide as needed.

I set the initial content of the static using the IDE’s caption editor and ICON font interface, so it would set up all the CSS as required, but then I went back into it and adjusted the HTML to use the Hex Unicode format instead, below is the HTML content of the static. If that all sounded like gibberish to you be sure to review the article mentioned above!

<span class="webdevclass-picto" style="font-family:'Elusive-Icons';">

</span>
Required

Don’t worry we have the ability to control the text shown in the warning and even the icon, and we will review that shortly. But first let’s add an Custom CSS file to the project so we can add a few CSS styles to it that will make what we are able to do much easier. Over on the Project Description Advanced WEBDEV (if you don’t use the combined IDE this probably just says Advanced), click on the additional files, and add a .CSS file. You will need to create the CSS first obviously, and if you have it outside the project folder it will ask you if it should copy it to the WEB\ext folder which is where you want it. Now any CSS you add to this file will be included in every page of the site, we will review specifics as we work through the rest of the code.

So now for some code to detect the error condition and show it. On the onclick browser event of the Next button we add some browser code to see if the field is blank if so we set our error static’s text, make it visible and change the edit control to have a red background and set focus back to the edit control

IF NoSpace(edtEmailMobile) = "" THEN
	errEmailMobile = SetWarnText(edtEmailMobile..Caption + " Required")
	errEmailMobile..Visible = True
	jQuery("#EDTEMAILMOBILE").addClass("LGError")
	ReturnToCapture(edtEmailMobile)
END

Line 2 is where we are setting the text of our static, by calling a global browser procedure, note for this simple error I am using the ..Caption property so the error will be the same as whatever the caption is followed by Required. So when we decide to call it Cell Number instead of Mobile Number, changing the caption automagically changes the error as well. Little things like that will help preserve your sanity in the future. Ask me how I know!!! We will look at the code of that procedure in a movement.

Line 3 makes the error visible

Line 4 uses a bit of JQuery to add a CSS class to our edit control. This is the magic that is changing the border to red.

And finally, Line 5 returns focus to the edit control

Now lets look at the code of the browser procedure SetWarnText

PROCEDURE SetWarnText(inText,Icon = "Warn")

retVal is string

SWITCH Icon
	CASE "Warn"
		retVal = [
			<span class="webdevclass-picto" style="font-family:'Elusive-Icons';">
			
			</span>
		]
	OTHER CASE
		
END
 retVal += inText


RESULT retVal

Note there is a second default parameter, this is so we can which if any icon is shown. At this stage, we only have 1 but as we move forward with this project this procedure we likely get expanded some. If we call it with an empty string for the 2nd parameter only the text is set, and the icon is not included. We may end up with yet another option parameter that lets use control color if we use this for more than true errors. Again planing for possible future requirements will pay dividends in the long run.

Remember Line 4 was adding a CSS class to the edit control. We just add that class to our LGExtra.CSS file

.LGError {
    border-color: RGB(216,39,45) !important;
}

We are changing the color of the border and using the !important keyword to make sure it overrides the existing CSS

One final piece of housekeeping, as soon as they start typing in the edit control I want to remove the error condition, so we add a bit of code to the Whenever modifying browser event of the edit control

errEmailMobile..Visible = False
jQuery("#EDTEMAILMOBILE").removeClass("LGError")

This code hides the error static and removes the CSS class, changing the border back to Blue as soon as the user starts typing in the field

This site is in its early stages and we are still working on the look and feel, we have worked out our combo controls as well, which took a bit more work. Here it is in its selected and dropped down formats

I have also written in the past about the challenges of adjusting combo boxes in a previous post, so be sure to check it out. That was back with v25 and I was hoping for improvements in v26, which still hasn’t come with v27, hopefully, v28 will finally address these shortcomings. The issue is those 2 magically settings for caption position don’t exist for a combo control style. What’s worst the caption that is shown with a combo box is done with a <TD> tag instead of a <Label> tag, which makes it that much more difficult to properly effect it with CSS and JQuery. But never fear the intrepid Uncle Pete is here to save you from this drudgery.

Let’s start with the style we can do via WEBDEV. First, as with the edit control, we will size the combo to not have a caption area, but we will set the caption text, and use the ..caption property in our code so we can still edit the caption via the IDE and not code. We don’t need to adjust the style of the caption since we aren’t using it, instead we will adjust just the input area, and just like the edit control use the overrides link and start by adjusting the Normal State

The Text tab is the same as the edit control, after all, we want the input of both controls to look the same.

This time however we do need to set the background to white. Without this setting, the background still correctly shows white at runtime, but shows the page background in the IDE so I go ahead and set it so the IDE is closer to WYSIWYG. Note: You could similarly set the background on the edit control if you prefer or are getting a different background than expected, a lot depends on the default settings on your Skin and Pallete.

Our border settings also match our edit control settings

No Shadow, Effects, Animations or Advanced but on the Margins tab along with the 2px left we do 10px Top. If you remember on the edit control we did the Top padding as Custom CSS in the Advanced tab. I suspect the reason we can get it to work here in the margins tab is because of how the nested HTML tags are generated for the combo.

The only other state we change is the Edit State just like with the edit control, we make the border 2px wide

And add a shadow

If you tested at this point you would have a combo that correctly matches the edit control except there is not caption.

To add the caption we add some code to the Initializing event of the control

MySelf..HTMLBefore = AddComboCaption(MySelf..FullName)

This is inserting some HTML into the page directly in front of the combo control, which is actually a <Select> tag. It calls the Global Server procedure AddComboCaption, passing the full name of the control. The procedure itself is quite simple

PROCEDURE AddComboCaption(inControlName)

tmpString is string = [
<label class="LGComboCaption">[%{inControlName}..Caption%]</label>
]
RESULT tmpString

This code just returns a string with a correctly formatted <label> tag, with the LGComboCaption CSS class, and using the caption set on the control. And you probably guessed correctly that CSS class is included in our LGExtra.CSS file

.LGComboCaption {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#00729E;
	position: absolute;
	transform: translateX(-5px) scale(0.75);
}

Now it is confession time, I only half understand some of this CSS, but between me and google we know everything! The font and color settings match our settings for the edit control caption. The position: absolute setting causes the the caption to be inside the border of the combo instead of above, but you would have to ask Google why 🙂 The transform is doing 2 things, first scaling the caption to 75%. How did I come up with 75% you might ask?, but digging through the CSS from WEBDEV where they are doing the same thing for the edit control caption. And the TranslateX is moving the caption 5 px left to get it to be in the position I wanted it in, that one was pure trial and error.

At this point, we haven’t had a need for an error condition on the combo so I haven’t worked out that CSS class but it should be very similar if not identical to the Edit Control Version.

Now for our first bonus question. After making a selection on the combo before tab off the field, the border turns black. I have not figured out where to affect this, it doesn’t seem to be any of the state overrides. So if you figure it out please share!

And for the real bonus material/question. I have been trying to get a 6 digit one time entry field to work. In the help for two-factor authentication, it mentions using 6 fields and “The controls then use the “Automatic end of input” option (“Details” tab of the control description window).” However, that option is only available in windows, not Web. I was surprised to find that a similar option doesn’t exist for Web. No problem I figured I could right my own using the JSEvent function and testing keystrokes and moving to the next field. First I wrote the code to be behind each of the six edit fields, but what I found is if you are a fast touch typist, the 3rd or 4th character would drop out. I suspect because of all the overhead javascript already running on the page. My second attempt I wrote the Javascript as an event handler for the page instead, but again the 3rd or 4th character would drop out if you typed to fast.

After doing quite a bit of googling I found that another solution that folks are using, not specifically for WEBDEV but for the Web in general, is a single edit field, with a background image to look like 6 fields, and some CSS to adjust the spacing. That gives me the following display

And I even worked out a CSS class to change it for an error condition using a second image with red boxes. However, there are 2 areas of “weirdness” that I haven’t been able to overcome.

First when you type in the last digit the numbers all shift to the left one spot for a brief second as the browser moves the input to the 7th position even though the control only allows 6, then my code hits and I set focus on the button and the numbers again line up properly. I could probably live with that, but the other issue is a bit uglier.

After filling the field, I set focus to the button, but if you click the mouse back into the edit field, for example, if you realize you made a typo, it highlights all the characters and shatters the illusion of it being 6 input fields

If anyone has gotten a 6 digit input with individual fields working as desired I would love to see how you accomplished it. This is one of those things I thought was going to be so easy, and instead well way down deep in a rabbit hole.

As I said we are just beginning to work out all of the look and feel of this site, and I will be sure to share more control styling as we develop them. I also have a post in the works discussing why I don’t ask for the password on the first page and some other very interesting details about the login process of this site.

If you are looking for even more inspiration for WEBDEV site look and feel Gavin Webb is preparing a Show & Tell Webinar to show us some of the interesting things he is doing with his current project. I have seen some of them and I can tell you that you definitely don’t want to miss his webinar! He is working feverously to wrap up some project features and is planning on being able to share a webinar with us sometime in October. Remember, Gavin will also be speaking at wxDevCon this is a great opportunity to see what someone other than Andy or myself is doing.

Remember wxDevCon is May 4-5 2023 in Lake of the Ozarks and we still have a few of the initial reservations left which include a 5% discount on your v28 upgrades. It will also be a great time to see many of the new features of v28 in action as we will working on creating presentations of some of the best new features of v29 which should be going gold right about that time. For more information and to make your reservation check out all the details here.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s