The fieldType attribute refers to the type of field you're looking to render in your custom component.

Fonteva supports the following inputFields. Standard Salesforce fields are marked "custom : false", while Fonteva fields are marked "custom :  true".

Fonteva supports the following fieldTypes:

  • anytype

    anytype

    "anytype": {
                componentDef: "inputText",
                attributes: {
                    'class': 'slds-input'
                },
                custom : false
            },
    JS
  • boolean

    boolean

    "boolean": {
                componentDef: "inputCheckbox",
                attributes: {
                    "labelClass": "slds-checkbox",
                    'class': 'checkbox'
                },
                custom : false
            },
    JS
  • fileupload

    fileupload

    "boolean": {
                componentDef: "inputCheckbox",
                attributes: {
                    "labelClass": "slds-checkbox",
                    'class': 'checkbox'
                },
                custom : false
            },
    JS
  • currency

    Currency

    "currency": {
                componentDef: "inputCurrency",
                attributes: {
                    'class': 'slds-input form-control col-md-8',
                    'format': '.00'
                },
                custom : false
            },
    JS
  • date

    date

    "date": {
                componentDef: "inputDate",
                attributes: {
                    'class': 'slds-input slds-datepicker',
                    'format': 'MM/DD/YYYY',
                    'displayDatePicker': true
                },
                custom : false
            },
    JS
  • datetime

    datetime

    "datetime": {
                componentDef: "inputDateTime",
                attributes: {
                    'class': 'slds-input slds-datepicker',
                    'displayDatePicker': true,
                    'format' : 'MM/DD/YYYY hh:mm A'
                },
                custom : false
            },
    JS
  • double

    double

    "double": {
                componentDef: "inputNumber",
                attributes: {
                    'class': 'slds-input form-control col-md-8',
                    'format': ".00"
                },
                custom : false
            },
    JS
  • email

    email

    <Framework:InputFields qaData='{"type" : "input", "name": "email"}' fieldType="email" aura:id="email" label="{!$Label.c.Login_Component_Email}" styleClasses="wrapper-input"
                           isRequired="{!!v.eventObj.guestEmailOptional}" value="{!v.newAttendee}" group="{!v.line.id}" fireChangeEvent="true" otherAttributes='{"updateOn" : "keyup"}'/>
    JS
  • password

    password

    "password": {
                componentDef: "inputSecret",
                attributes: {
                    'class': 'slds-input form-control col-md-8'
                },
                custom : false
            },
    JS
  • id

    id

    "id": {
                componentDef: "inputText",
                attributes: {
                    'class': 'slds-input form-control col-md-8'
                },
                custom : false
            },
    JS
  • integer

    integer

     "integer": {
                componentDef: "inputNumber",
                attributes: {
                    values: {
                        format: "0"
                    },
                    'class': 'slds-input form-control col-md-8'
                },
                custom : false
            },
    JS
  • phone

    phone

    "phone": {
                componentDef: "inputPhone",
                attributes: {
                    'class': 'slds-input form-control col-md-8'
                },
                custom : false
            },
    JS
  • multipicklist

    multipicklist

    "multipicklist": {
                componentDef: "MultiPicklistInputField",
                attributes : {},
                custom : true
            },
    JS
  • percent

    percent

    "percent": {
                componentDef: "inputNumber",
                attributes: {
                    values: {
                        format: "0"
                    },
                    'class': 'slds-input form-control col-md-8'
                },
                custom : false
            },
    JS
  • picklist

    picklist

    "picklist": {
                componentDef: "PicklistInputField",
                attributes: {
                    'class': 'slds-select form-control',
                },
                custom : true
            },
    JS
  • dependentpicklist

    dependentpicklist

    "dependentpicklist": {
                componentDef: "DependentPicklist",
                attributes : {},
                custom : true
            },
    JS
  • reference

    reference

    "reference": {
                componentDef: "LookupInputField",
                attributes: {
                    displayField: "Name"
                },
                custom : true
            },
    JS
  • string

    string

     "string": {
                componentDef: "inputText",
                attributes: {
                    'class': 'slds-input form-control col-md-8'
                },
                preload : "markup://ui:inputText",
                custom : false
            },
    JS
  • textarea

    textarea

    "textarea": {
                componentDef: "inputTextArea",
                attributes: {
                    'class': 'form-control col-md-8 slds-textarea slds-textarea--vertical'
                },
                custom : false
            },
    JS
  • richtext

    richtext

    "richtext": {
                componentDef: "RichTextInputField",
                attributes: {
                    'class': 'form-control slds-input col-md-8'
                },
                custom : true
            },
    JS
  • basicrichtext

    basicrichtext

    "basicrichtext": {
                componentDef: "inputRichText",
                attributes: {
                    'class': 'form-control slds-input col-md-8'
                },
                custom : false
            },
    JS
  • time

    time

    "time": {
                componentDef: "inputDateTime",
                attributes: {
                    values: {
                        format: "h:mm a"
                    },
                    'class': 'slds-input form-control col-md-8'
                },
                custom : false
            },
    JS
  • lookup

    lookup

     "lookup": {
                componentDef: "LookupInputField",
                attributes: {
                    displayField: "Name"
                },
                preload : "markup://c:LookupInputField",
                custom : true
            },
    JS
  • address

    address

    "address": {
                componentDef: "AddressPickerInputField",
                attributes: {
                },
                custom : true
            },
    JS
  • url

    url

    "url": {
                componentDef: "inputUrl",
                attributes: {
                    'class': 'slds-input form-control col-md-8',
                },
                custom : false
            },
    JS
  • multidragdrop

    multidragdrop

    "multidragdrop": {
                componentDef: "MultiDragListInputField",
                attributes: {
                    'class': 'slds-input'
                },
                custom : true
            },
    JS
  • reorderdragsinglelist

    reorderdragsinglelist

    "reorderdragsinglelist": {
                componentDef: "ReorderDragListInputField",
                attributes: {
                    'class': 'slds-input'
                },
                custom : true
            },
    JS
  • advancedselectfield

    advancedselectfield

    "advancedselectfield": {
                componentDef: "AdvancedSelectInputField",
                attributes: {},
                custom : true,
                preload : "markup://c:AdvancedSelectInputField",
            },
    JS
  • colorpickerfield

    colorpckerfield

     "colorpickerfield": {
                componentDef: "ColorPickerInputField",
                attributes: {},
                custom : true
            },
    JS
  • codeeditorfield

    codeeditorfield

    "codeeditorfield": {
                componentDef: "CodeEditorInputField",
                attributes: {},
                custom : true
            },
    JS
  • radio

    radio

    "radio": {
                componentDef: "inputRadio",
                attributes: {
                    "labelClass": "slds-checkbox",
                    'class': 'checkbox',
                },
                preload : "markup://ui:inputRadio",
                custom : false
            },
    JS
  • alternateradio

    alternateradio

    "alternateradio": {
                componentDef: "RadioGroupAlternativeInputField",
                attributes: {
                    "labelClass": "slds-checkbox",
                    'class': 'checkbox',
                },
                custom : true
            },
    JS
  • multigroupdragdrop

    multigroupdragdrop

    "multigroupdragdrop": {
                componentDef: "MultiGroupDragListInputField",
                attributes: {
                    'class': 'slds-input'
                },
                custom : true
            }
    JS

For visual examples of the above inputFields, add '/apex/Framework__playground' to the end of your Salesforce org link - For example, https://your-org-name.na73.visual.force.com/apex/Framework__playground