Page 1 of 1
Fields with a Required Field Indiciator that is a Different Color
Posted: Thu Oct 06, 2016 6:39 am
by caseywhite
I would like to be able to have fields with a red asterisk after the caption. The desire is to show the caption above the field with the red asterisk to the right of the caption and the input field below the caption. There is no property that can see that lets me do this. Is my only choice to hide the caption for the field and then create a custom reusable part that will allow me to tell it the caption and whether the field is required. This way I can assign one style to the caption and one style to the asterisk. What I don't like about this option is that is seems very complicated because instead of just a simple field with a caption I now have to try to layout 2 objects which seems tricky.
Below would be the layout. In terms of setting a layout I was thinking about have 2 rows and just have things flow to the right in each row. But I think the better option is to have 2 columns with just one row and have things flow down within each column. For responsiveness the fields in column 2 would just move over to column 1.
Field 1 Caption * Field 2 Caption *
Field 1 Input Field 2 Input *
Field 3 Caption * Field 4 Caption *
Field 3 Input Field 4 Input *
So my questions are:
1. Is there a better way?
2. Is there plans to allow this type of property native to the field so that you don't have to create this type of solution.
Re: Fields with a Required Field Indiciator that is a Different Color
Posted: Thu Oct 06, 2016 10:43 am
by Stewart Marshall
Hi Casey
Is it really necessary to set the "Required" flag at runtime?
Based on why you've said, I think I'd just have a few labels that were positioned in just the right place and then move then around with a little code when the design changes for different device sizes. This wouldn't cater for changes to the field text, but that seems like it would be a fairly rare occurrence for the most part anyway.
Is there something I've missed in the requirements?
Regards
Re: Fields with a Required Field Indiciator that is a Different Color
Posted: Sat Oct 08, 2016 2:52 am
by caseywhite
Hi Stewart.
The issue is that I would like to just use the fields label and position it top using the property of the field that lets you control the label. The problem is there is no way to show a red asterisk next to the caption without making two labels, one with the caption and one with the red asterisk. Now I have 3 objects. A field, the fields label and the field label red asterisk. For now I am just having the asterisk be black and be part of the caption because I don't want to have 3 objects for a single field.
Re: Fields with a Required Field Indiciator that is a Different Color
Posted: Sat Oct 08, 2016 7:47 am
by Stewart Marshall
Why 3 controls?
You can still position the label above the field as normal and then add the red asterisk on top of the label.
The only minor issue with this is that moving the labels for different designs will require a line of code or two.
Code: Select all
Begin_Com Role(*EXTENDS #PRIM_WEB) Height(712) Width(1024) LayoutManager(#Layout1)
Define_Com Class(#PRIM_VS.Style) Name(#Style1) ForegroundBrush(#Brush1) Bold(True)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(255:0:0)
Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Column(#LayoutColumn1) Flow(Down) Manage(#xEmployeeSurname) Parent(#Layout1) Row(#LayoutRow1) Sizing(None) Alignment(TopLeft) MarginLeft(4) MarginTop(4)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Column(#LayoutColumn1) Flow(Down) Manage(#xEmployeeGivenNames) Parent(#Layout1) Row(#LayoutRow1) Sizing(None) Alignment(TopLeft) MarginLeft(4) MarginTop(4)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem3) Column(#LayoutColumn1) Flow(Down) Manage(#xEmployeeIdentification) Parent(#Layout1) Row(#LayoutRow1) Sizing(None) Alignment(TopLeft) MarginLeft(4) MarginTop(4)
Define_Com Class(#xEmployeeIdentification.Visual) Name(#xEmployeeIdentification) DisplayPosition(1) Parent(#COM_OWNER) TabPosition(1) Height(44) LabelPosition(Top) MarginLeft(0) MarginTop(19) Width(151) Left(4) Top(4)
Define_Com Class(#xEmployeeSurname.Visual) Name(#xEmployeeSurname) DisplayPosition(2) Parent(#COM_OWNER) TabPosition(2) Top(52) Height(44) LabelPosition(Top) MarginLeft(0) MarginTop(19) Width(405) Left(4)
Define_Com Class(#xEmployeeGivenNames.Visual) Name(#xEmployeeGivenNames) DisplayPosition(3) Parent(#COM_OWNER) TabPosition(3) Top(100) Height(44) LabelPosition(Top) MarginLeft(0) MarginTop(19) Width(405) Left(4)
Define_Com Class(#PRIM_LABL) Name(#Label1) Caption('*') DisplayPosition(6) Ellipses(Word) Height(25) Left(74) Parent(#COM_OWNER) TabPosition(6) TabStop(False) Top(5) VerticalAlignment(Center) Width(11) Alignment(Center) Style(#Style1)
Define_Com Class(#PRIM_LABL) Name(#Label2) Caption('*') DisplayPosition(5) Ellipses(Word) Height(25) Left(52) Parent(#COM_OWNER) TabPosition(5) TabStop(False) Top(52) VerticalAlignment(Center) Width(11) Alignment(Center) Style(#Style1)
Define_Com Class(#PRIM_LABL) Name(#Label3) Caption('*') DisplayPosition(4) Ellipses(Word) Height(25) Left(75) Parent(#COM_OWNER) TabPosition(4) TabStop(False) Top(100) VerticalAlignment(Center) Width(11) Alignment(Center) Style(#Style1)
End_Com