Increase your efficiency in the region and item layout in APEX.

Now kind of consumes more space so I can say save and run and if I hide my grid, okay you can see things still are a little spaced out but I have my major components kind of their kind of getting a little closer together and I can modify this a little more to make it look better but I think you get a general idea but the other thing that is nice here is what it does is it also when I start minimizing my screen it will still pop or it’ll still keep things organized down to the kind of smaller sizes okay any questions on kind of positioning items and sub-regions and sub-regions or any of that stuff ok.

Let’s look at it so if we show the grid we can see that and remember apex likes to have labels take three columns so if I want all of this stuff to kind of slide over a little I’m just going to have to tell apex that the job salary and commission I want all the labels of this region to only take one column right I don’t want this kind of these three big columns here I don’t want that so how do I fix that so if I go to job info I think there’s actually a way to do it at the regional level now let me this is new let me make sure um maybe I lied I thought I saw something there and I meant to explore it in a little greater detail which doesn’t really matter because apex does this very well in bulk anyway and so we want to adjust the label of my three items so I can actually just select all three items by holding shift or control and I have label column span here and I’m going to change this to one.

So, in other words, all I’m saying is please just get rid of that extra space for my label I’m okay I know that I have some pretty small labels here so I’m ok with only using one column go ahead and save run my page and now you can see that job really gets are these items really get pushed up close so apex likes to give you three columns generally one easy way of kind of solving this issue is by removing some of the labels spans on some of the on whatever’s to the right any questions on that so if I hide great it will look a little better because these are in separate sub-region containers to keep them grouped and I can’t really get this item pushed up really close to this I mean I can get it obviously if I show grid I can do things to make these items kind of push out more to the right like for instance I could make the and I’ll do the opposite just to show you I’m going to make these items these labels instead of calling them spanning three.

I am going to make them call span 5 so let’s do that so I’m going to go over here and I’m going to say well you guys are your items let me accidentally selected some stuff I want your label to column-span 5 save let’s see what happens run and that kind of pushes the item again that pushes things more to the right and this kind of pulled things more to the left hide grid okay so now they’re a little closer so just balancing out the labels and items bands and whatnot and call spans you can fix that any other questions on that the little icons for the calendar always pop down below on the next line, but your stays next let me do this like that yeah, so that’s just part of that particular component it to make space that’s just what it do I don’t think there’s a real easy way to adjust that um I mean I guess I could try to close the hamburger menu that would be a kind of CSS change.

I don’t have a quick answer to that one you are okay all right and then basically item layout is the same functions exactly the same as regions and actually we’ve talked about oh let me item layout basics well it’s the pretty much the exact same as regions just the only thing that you get to also work with is the label span which we’ve we’ve already talked about I like to include this slide I always like to include this slide just you can kind of get kind of an idea of what each property is trying to do in my words and if you ever need to add any this miscellaneous attributes to an item you can do that here in the column oops in the in the column attributes so let’s just take a look and see what that does very quickly it’s going to edit an item and we can come over here to the under grid we can go to the column attributes and we can say here just so you can kind of sea will do style equals and we’ll do a background color red so I should really stick out and I think this one actually bark at me.

Alright if I remember correctly oh no it worked just fine so remember we’re talking about the column itself, not just a particular item if you want to modify an item that’s exactly so it’s a combination thereof, so this is um there’s an HTML attribute called style which can interpret CSS if that makes sense so let me magnify on this real quick the style equals is an HTML attribute that expects things in CSS syntax so it expects style attributes and this is that I don’t know how else to word it so these yeah so these this style is written in CSS and this is technically an HTML attribute okay so what apex likes you too likes you to do when you want to change how an item looks it likes you to use template options here so you can come in here and we can change the size of an item to make it bigger or smaller or we can tell it to stretch the form item which means the item should consume all of all the horizontal width.

So I’ll so go ahead and stretch this item and I’ll make it extra large so let’s see what happens with the job, okay so I made this item even bigger and it stretches the entire size, so that’s one way we like your apex tries to direct you to customize the item and one thing that’s kind of knew about this is you can see it’s asking you for CSS classes and it doesn’t really yeah I think custom attributes or what we’re looking for let me make sure yeah so we can actually add under advanced this is how we can add custom attributes to a particular item okay so let me just think of one I should be able to add oh that already has something for placeholder let meet well let me do style maybe I’ll let me do style let’s see and again I’ll do background color and this time I’m going to do salmon okay and so now you can see that the item it’s a background color of salmon.

So we have to go into advanced and then custom attributes that’s to add attributes to an item and then if you want to add attributes to an item’s column or the surrounding container we can do that under the grid section any questions for getting custom attributes and things onto items ok and then item layout is essentially the same controlling item layout that’s essentially the same as controlling region laid out in a grid and then we say here to use nested regions when you want to kind of group items together so we say use nested regions or child regions without templates allows for greater control and grouping and that’s what we did that’s what our workshop was and so the statement was for the recording and that sub-regions are generally better for grouping related data rather than like related data in the same form rather than having kind of loosely related information or other components varied types of components nested together.

Leave a Comment