New call-to-action
Results 1 to 7 of 7

Thread: Specify abstract class name in grid 'conditional style and class' window?

  1. #1
    "Certified" Alphaholic
    Real Name
    Rich Fulham
    Join Date
    May 2011
    Location
    Portland, OR
    Posts
    1,021

    Default Specify abstract class name in grid 'conditional style and class' window?

    How does one specify an abstract class name in the client-side "Conditional Style and Class" properties window for a field in the Search Part, Grid, or Detail?

    I'd like to be able to use either the pure abstract class name, like:
    [class.searchPartSelect]
    Or, a partially abstracted name like:
    {ProjectStyle}Edit
    Or,
    <ProjectStyle>Edit

    But, I cannot find the syntax to make that work.

  2. #2
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,902

    Default Re: Specify abstract class name in grid 'conditional style and class' window?

    Have a look in the "Edit Condition" dialog for a hint. Beside "Class Name" you'll see a ?. This explains that you would either create a class in the Local CSS section... or... include an additional Style in the Grid Properties "Additional Grid style" property.

    E.g. Add MobBlue in the "Additional Grid style" property. Then... in the Conditional Style Class Name you can pick the class you want... and you'll see all the MobBlue classes available. You could enter MobBlueEdit.

  3. #3
    "Certified" Alphaholic
    Real Name
    Rich Fulham
    Join Date
    May 2011
    Location
    Portland, OR
    Posts
    1,021

    Default Re: Specify abstract class name in grid 'conditional style and class' window?

    Um, yes David, I know that.

    I was wanting to specify an abstract name that would adapt to the particular project style that was/is active. When one adds a Checkbox control to the Search Part (and probably to any other part), Alpha neglects to add a CSS class name to the DIV that holds the checkboxes. I was looking to help AA out and just apply the correct class name based on the project style via a conditional (1=1) client-side class/style. If it cannot be done through the properties builder, I will have to resort to adding JavaScript to the 'onSearchRender' event to extract the base style name from the Grid's properties and build the correct class name and apply it to the DIV that contains the checkboxes for the field.

  4. #4
    "Certified" Alphaholic
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,902

    Default Re: Specify abstract class name in grid 'conditional style and class' window?

    Maybe I still don't understand.

    Are you asking what the Checkbox control Class Name is? If so, as far as I can see there isn't one. A checkbox is... just a boring checkbox. If I've not missed it somewhere... and there actually isn't one... then create your own.

    The UX component has the ability to "design" Checkbox and RadioButton controls. The Grid doesn't have that feature so you'll need to do it in a class.

    What do you want the checkbox to look like?

  5. #5
    Alpha Software Employee Sarah Mitchell's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    460

    Default Re: Specify abstract class name in grid 'conditional style and class' window?

    Quote Originally Posted by RichCPT View Post
    How does one specify an abstract class name in the client-side "Conditional Style and Class" properties window for a field in the Search Part, Grid, or Detail?

    I'd like to be able to use either the pure abstract class name, like:
    [class.searchPartSelect]
    Or, a partially abstracted name like:
    {ProjectStyle}Edit
    Or,
    <ProjectStyle>Edit

    But, I cannot find the syntax to make that work.
    Hello Rich,

    If you're using a version 2 Alpha Anywhere style, you can specify a class from the style using the {grid.style} placeholder. For example:

    Code:
    {grid.style}Button
    Using the new version 3 styles, such as iOS7, Alpha, or the AndroidLight and AndroidDark styles, the syntax has changed to use the "theme:" prefix followed by a path that specifies the class to use. For example, If I wanted to style a Label to match a Button using the base subtheme, I could specify it's class name like this:
    Code:
    [theme:button.base.className]
    You can find the "path" by opening the style in the Style Builder. Select the "Code" tab on the right. Select the control with the desired style. The "Path" will list the text you need to specify in the Class property for a control. See attached image.

    buttonClassname.png
    Sarah Mitchell
    Documentation | Alpha Software Corporation
    Get in the know! Join us for our Weekly Webinars: TransForm Tuesday and Wednesday's Alpha Anywhere Demo and Q&A
    Connect with us: Instagram | Twitter | Facebook | LinkedIn | YouTube


  6. #6
    "Certified" Alphaholic
    Real Name
    Rich Fulham
    Join Date
    May 2011
    Location
    Portland, OR
    Posts
    1,021

    Default Re: Specify abstract class name in grid 'conditional style and class' window?

    Thanks Sarah.
    I should have thought to look into the various placeholders as displayed in the popup window when coding inline javascript.
    Although, looking closer at the generated html for the Search part of a Grid, it seems to me that some options for CSS class or inline style may not be placed at the correct level, especially for the Grid builder's prompt for inline style to be attached to the "< table >" element.
    I did not try your method because I already added the class and styles via JavaScript in the OnSearchRender event. Now the checkbox controls and dropdown boxes in my Search part have a consistent look - a surrounding box and the controls begin at the same vertical offset in the row. It looks much better now, IMO.

  7. #7
    Alpha Software Employee Sarah Mitchell's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    460

    Default Re: Specify abstract class name in grid 'conditional style and class' window?

    Quote Originally Posted by RichCPT View Post
    Thanks Sarah.
    I should have thought to look into the various placeholders as displayed in the popup window when coding inline javascript.
    Although, looking closer at the generated html for the Search part of a Grid, it seems to me that some options for CSS class or inline style may not be placed at the correct level, especially for the Grid builder's prompt for inline style to be attached to the "< table >" element.
    I did not try your method because I already added the class and styles via JavaScript in the OnSearchRender event. Now the checkbox controls and dropdown boxes in my Search part have a consistent look - a surrounding box and the controls begin at the same vertical offset in the row. It looks much better now, IMO.
    If you come across a template that uses the [class.xxxx] syntax, I believe you can use the same syntax to reference other classes.

    You can easily get a list of those [class.xxxx] placeholders from the "Class map" property in the Grid's properties.

    Open the "Class map" property in the Grid properties and click on the "Show the Default Class Map", it will list all of the class mappings for the [class.xxx] syntax used by version 2 styles. Note that they map to a class using the {grid.style} placeholder. The {grid.style} version can be used in conditional class statements and JavaScript for version 2 styles. Version 3 styles use the [theme:path] syntax:

    [class.page]={grid.style}Page
    [class.gridPart]={grid.style}Grid
    [class.gridHeader]={grid.style}GridHeader
    [class.gridPartToolbar]={grid.style}GridFooter
    [class.gridSeparator]={grid.style}GridSeparator
    [class.gridRowHeader]={grid.style}GridRowHeader
    [class.searchPartRowHeader]={grid.style}GridRowHeader
    [class.gridDataHeader]={grid.style}GridDataHeader
    [class.gridData]={grid.style}GridData{alternate}
    [class.gridDataAltOn]={grid.style}GridDataAlt
    [class.gridDataAltOff]={grid.style}GridData
    [class.gridRowHover]={grid.style}GridRowHover
    [class.gridRowSelected]={grid.style}GridRowSelected
    [class.gridDataError]={grid.style}GridDataError
    [class.gridSorterLink]={grid.style}Link
    [class.gridNavigatorLink]={grid.style}Link
    [class.gridDataLink]={grid.style}Link
    [class.gridNavigator]={grid.style}GridNav
    [class.gridNavigatorInput]={grid.style}Edit
    [class.gridNavigatorSelect]={grid.style}Edit
    [class.gridPartInput]={grid.style}Edit
    [class.gridSelect]={grid.style}Edit
    [class.gridPartTextarea]={grid.style}Edit
    [class.gridButton]={grid.style}Button
    [class.gridDetailViewNewRecordLink]={grid.style}Link
    [class.detailViewPartInput]={grid.style}Edit
    [class.detailViewPartHeader]={grid.style}Heading
    [class.alternateViewButton]={grid.style}Button
    [class.searchPartHeader]={grid.style}Heading
    [class.searchPartData]={grid.style}GridData
    [class.detailViewPart]={grid.style}Grid
    [class.searchPart]={grid.style}Grid
    [class.gridSummaryData]={grid.style}GridSummaryData
    [class.gridSummaryLabel]={grid.style}GridSummaryLabel
    [class.gridFrame]={grid.style}Group
    [class.gridFrameLabel]={grid.style}GroupLabel
    [class.formFrame]={grid.style}Group
    [class.formFrameLabel]={grid.style}GroupLabel
    [class.searchPartToolbar]={grid.style}GridFooter
    [class.gridQBEToggleLink]={grid.style}Link
    [class.gridNavigatorButton]={grid.style}Button
    [class.gridAlphabetButtonSearchLink]={grid.style}Link
    [class.gridAlphabetButtonSearchButton]={grid.style}Button
    [class.gridAlphabetButtonSearchSelect]={grid.style}Edit
    [class.gridHyperlinkButton]={grid.style}Link
    [class.gridHyperlinkButtonHover]={grid.style}Link
    [class.gridHyperlinkButtonPressed]={grid.style}Link
    [class.gridHyperlinkButtonDisabled]={grid.style}Link
    [class.gridLookupRowSelect]={grid.style}Link
    [class.gridButtonHover]={grid.style}ButtonHover
    [class.gridButtonPressed]={grid.style}ButtonPressed
    [class.gridButtonDisabled]={grid.style}ButtonDisabled
    [class.gridPartQBEInput]={grid.style}Edit
    [class.gridInputError]={grid.style}EditError
    [class.gridInputContainerError]={grid.style}EditBGError
    [class.gridTextareaError]={grid.style}EditError
    [class.gridSelectError]={grid.style}EditError
    [class.searchPartInput]={grid.style}Edit
    [class.searchPartButton]={grid.style}Button
    [class.searchPartSubmitButton]={grid.style}Button
    [class.searchPartClearSearchLink]={grid.style}Link
    [class.searchPartSelect]={grid.style}Edit
    [class.detailViewPartTextarea]={grid.style}Edit
    [class.searchPartTextarea]={grid.style}Edit
    [class.form]={grid.style}GridForm
    [class.formLabel]={grid.style}GridFormLabel
    [class.formData]={grid.style}GridFormData
    [class.formDataError]={grid.style}GridFormDataError
    [class.formLabelLink]={grid.style}Link
    [class.formDataLink]={grid.style}Link
    [class.formButton]={grid.style}Button
    [class.formButtonHover]={grid.style}ButtonHover
    [class.formButtonPressed]={grid.style}ButtonPressed
    [class.formButtonDisabled]={grid.style}ButtonDisabled
    [class.formInput]={grid.style}Edit
    [class.formInputError]={grid.style}EditError
    [class.formTextarea]={grid.style}Edit
    [class.formTextareaError]={grid.style}EditError
    [class.formSelect]={grid.style}Edit
    [class.formSelectError]={grid.style}EditError
    [class.gridQBE]={grid.style}GridQBE
    [class.dialogSelect]={Dialog.style}Edit
    [class.dialogTextarea]={Dialog.style}Edit
    [class.dialogInput]={Dialog.style}Edit
    [class.dialogButton]={Dialog.style}Button
    [class.dialogRadiobuttonLabel]=
    [class.dialogCheckboxLabel]=
    [class.editButtonGroupEdit]={grid.style}EditBGEdit
    [class.dialogRepeatingSectionHeader]={dialog.style}DialogRSHeader
    [class.dialogRepeatingSectionFooter]={dialog.style}DialogRSFooter
    [class.dialogRepeatingSectionRow]={dialog.style}DialogRSRow
    [class.dialogRepeatingSectionRowSelected]={dialog.style}DialogRSRowSelected
    [class.dialogRepeatingSectionSeparator]={dialog.style}DialogRSSeparator
    [class.dialogRepeatingSectionRowHover]={dialog.style}DialogRSRowHover
    [class.dialogRepeatingSectionRowError]={dialog.style}DialogRSRowError
    [class.tabbedUI]={tabbedUI.style}Grid
    [class.tabbedUIMenuCollapsed]={tabbedUI.style}GridHeader
    [class.tabbedUIMenuPanel]={tabbedUI.style}GridDataAlt
    [class.tabbedUIMenuPanelHeader]={tabbedUI.style}GridHeader
    [class.tabbedUIDivider]={tabbedUI.style}GridHeader
    [class.tabbedUIPanel]={tabbedUI.style}GridData
    [class.dialogLabel]={Dialog.style}GridData
    [class.dialogFieldLabel]={Dialog.style}DialogLabel
    [class.detailViewPartToolbar]={Grid.style}GridFooter
    [class.searchHighlight]={grid.style}TextHighlight
    [class.gridQBE]={grid.style}GridQBE
    [class.detailViewPartSelect]={grid.style}Edit
    [class.ModernFrameTitle]={grid.style}AccordionButtonSelected
    [class.ModernFrameTitleCollapsed]={grid.style}AccordionButton
    [class.ModernFrameBody]={grid.style}AccordionPane
    [class.TreeControl]={grid.style}Tree
    Sarah Mitchell
    Documentation | Alpha Software Corporation
    Get in the know! Join us for our Weekly Webinars: TransForm Tuesday and Wednesday's Alpha Anywhere Demo and Q&A
    Connect with us: Instagram | Twitter | Facebook | LinkedIn | YouTube


Similar Threads

  1. missing class in class properties and subtheme
    By rimuzakki in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 01-29-2016, 05:51 AM
  2. Replies: 1
    Last Post: 07-24-2015, 11:16 AM
  3. Custom Class 'Class xxx was not found' Error
    By blawton in forum Alpha Five Version 11 - Desktop Applications
    Replies: 0
    Last Post: 12-12-2012, 10:57 AM
  4. How do I style a grid element using a class id?
    By mitconsulting in forum Application Server Version 10 - Web/Browser Applications
    Replies: 2
    Last Post: 08-25-2011, 10:16 PM
  5. Bug - Static class method called from other class doesn't work
    By Steven P. in forum Application Server Version 10 - Web/Browser Applications
    Replies: 0
    Last Post: 06-28-2011, 09:33 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •