{"id":5459,"date":"2019-02-02T22:01:07","date_gmt":"2019-02-02T22:01:07","guid":{"rendered":"https:\/\/unofficialsf.com\/?page_id=5459"},"modified":"2022-10-10T19:39:45","modified_gmt":"2022-10-11T03:39:45","slug":"lightninginput","status":"publish","type":"page","link":"https:\/\/unofficialsf.com\/lightninginput\/","title":{"rendered":"Tap into the Multiple Capabilities of the Lightning Input Screen Component"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>This is a a Flow-optimized version of the&nbsp;<a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/aura_compref_lightning_input.htm\">Lightning Input<\/a>&nbsp;component, which includes the following input types:<\/p>\n\n\n\n<p>checkbox | checkbox-button | color | date | datetime-local | email | month | number | password | radio | range | tel | time | toggle | url | week<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>A Swiss-Army Knife of a component, capable of serving as 10 different inputs. Here are just four:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"932\" height=\"690\" data-attachment-id=\"5460\" data-permalink=\"https:\/\/unofficialsf.com\/lightninginput\/screen-shot-2019-02-02-at-2-00-47-pm\/\" data-orig-file=\"https:\/\/unofficialsf.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-02-at-2.00.47-PM.png\" data-orig-size=\"932,690\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screen Shot 2019-02-02 at 2.00.47 PM\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/unofficialsf.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-02-at-2.00.47-PM.png\" src=\"https:\/\/unofficialsf.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-02-at-2.00.47-PM.png\" alt=\"\" class=\"wp-image-5460\" srcset=\"https:\/\/unofficialsf.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-02-at-2.00.47-PM.png 932w, https:\/\/unofficialsf.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-02-at-2.00.47-PM-300x222.png 300w, https:\/\/unofficialsf.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-02-at-2.00.47-PM-768x569.png 768w, https:\/\/unofficialsf.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-02-at-2.00.47-PM-705x522.png 705w, https:\/\/unofficialsf.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-02-at-2.00.47-PM-450x333.png 450w\" sizes=\"auto, (max-width: 932px) 100vw, 932px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#how-it-works\"><\/a>How It Works<\/h2>\n\n\n\n<p>The component has two required attributs:&nbsp;<code>type<\/code>&nbsp;(possible values noted above) and&nbsp;<code>label<\/code>, which must be set in the Flow. There are also several type-specific attributes and validation attributes available (see here for full documentation)<\/p>\n\n\n\n<p>A&nbsp;<code>value<\/code>&nbsp;attribute captures the user&#8217;s input and can be used to set a Flow variable.<\/p>\n\n\n\n<p>For checkboxes and radio buttons, setting the &#8220;Group Name&#8221; attribute in the Flow will tie the buttons together.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#attributes-and-examples-by-type\"><\/a>Attributes and Examples by Type<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>type: &#8220;checkbox&#8221;<ul><li>label: &#8220;Red&#8221;<\/li><li>checked: &#8220;true&#8221;<\/li><\/ul><\/li><li>type: &#8220;checkbox&#8221;<ul><li>label: &#8220;Blue&#8221;<\/li><\/ul><\/li><li>type: &#8220;checkbox&#8221;<ul><li>label: &#8220;Add pepperoni&#8221;<\/li><li>checked: &#8220;true&#8221;<\/li><li>value: &#8220;pepperoni&#8221;<\/li><\/ul><\/li><li>type: &#8220;checkbox-button&#8221;<ul><li>label: &#8220;Add salami&#8221;<\/li><li>value: &#8220;salami&#8221;<\/li><\/ul><\/li><li>type: &#8220;color&#8221;<ul><li>label: &#8220;Color&#8221;<\/li><li>value: &#8220;#EEEEEE&#8221;<\/li><\/ul><\/li><li>type: &#8220;date&#8221;<ul><li>label: &#8220;Birthday&#8221;<\/li><\/ul><\/li><li>type: &#8220;datetime-local&#8221;<ul><li>label: &#8220;Birthday&#8221;<\/li><\/ul><\/li><li>type: &#8220;email&#8221;<ul><li>label: &#8220;Email&#8221;<\/li><li>value: &#8220;<a href=\"mailto:abc@domain.com\">abc@domain.com<\/a>&#8220;<\/li><\/ul><\/li><li>type: &#8220;month&#8221;<ul><li>label: &#8220;Birthday&#8221;<\/li><\/ul><\/li><li>type: &#8220;number&#8221;<ul><li>label: &#8220;Number&#8221;<\/li><li>value: &#8220;12345&#8221;<\/li><\/ul><\/li><li>type: &#8220;number&#8221;<ul><li>label: &#8220;Enter a number&#8221;<\/li><\/ul><\/li><li>type: &#8220;number&#8221;<ul><li>label: &#8220;Enter a decimal value&#8221;<\/li><li>step: &#8220;0.001&#8221;<\/li><\/ul><\/li><li>type: &#8220;number&#8221;<ul><li>label: &#8220;Enter a percentage value&#8221;<\/li><li>formatter: &#8220;percent&#8221;<\/li><li>step: &#8220;0.01&#8221;<\/li><\/ul><\/li><li>type: &#8220;number&#8221;<ul><li>label: &#8220;Enter a dollar amount&#8221;<\/li><li>formatter: &#8220;currency&#8221;<\/li><li>step: &#8220;0.01&#8221;<\/li><\/ul><\/li><li>type: &#8220;password&#8221;<ul><li>label: &#8220;Password&#8221;<\/li><\/ul><\/li><li>type: &#8220;radio&#8221;<ul><li>label: &#8220;Red&#8221;<\/li><li>value: &#8220;red&#8221;<\/li><li>checked: &#8220;true&#8221;<\/li><\/ul><\/li><li>type: &#8220;radio&#8221;<ul><li>label: &#8220;Blue&#8221;<\/li><li>value: &#8220;blue&#8221;<\/li><\/ul><\/li><li>Radio Group<ul><li>type: &#8220;radio&#8221;<ul><li>label: &#8220;Red&#8221;<\/li><li>group name: &#8220;color&#8221;<\/li><li>value: &#8220;red&#8221;<\/li><li>checked: &#8220;true&#8221;<\/li><\/ul><\/li><li>type: &#8220;radio&#8221;<ul><li>label: &#8220;Blue&#8221;<\/li><li>group name: &#8220;color&#8221;<\/li><li>value: &#8220;blue&#8221;<\/li><\/ul><\/li><\/ul><\/li><li>type: &#8220;range&#8221;<ul><li>label: &#8220;Number&#8221;<\/li><li>min: &#8220;0&#8221;<\/li><li>max: &#8220;10&#8221;<\/li><\/ul><\/li><li>type: &#8220;tel&#8221;<ul><li>label: &#8220;Telephone&#8221;<\/li><li>value: &#8220;343-343-3434&#8221;<\/li><li>pattern: &#8220;[0-9]{3}-[0-9]{3}-[0-9]{4}&#8221;<\/li><\/ul><\/li><li>type: &#8220;time&#8221;<ul><li>label: &#8220;Time&#8221;<\/li><\/ul><\/li><li>type: &#8220;toggle&#8221;<ul><li>label: &#8220;Toggle value&#8221;<\/li><li>checked: &#8220;true&#8221;<\/li><\/ul><\/li><li>type: &#8220;url&#8221;<ul><li>label: &#8220;Website&#8221;<\/li><\/ul><\/li><li>type: &#8220;week&#8221;<ul><li>label: &#8220;Week&#8221;<\/li><\/ul><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#custom-validation-parameters-and-messages\"><\/a>Custom Validation Parameters and Messages<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#the-following-validations-can-be-set-in-the-flow-to-show-default-or-custom-messages\"><\/a>The following validations can be set in the Flow to show default or custom messages:<\/h3>\n\n\n\n<p>max | maxlength | min | minlength | required | pattern<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#pattern-usage\"><\/a>pattern usage<\/h4>\n\n\n\n<p>For type&nbsp;<code>tel<\/code>&nbsp;the pattern [0-9]{3}-[0-9]{3}-[0-9]{4} allows &#8216;415-555-1212&#8242;, but shows an error message for &#8217;33-555-1212&#8217;.<\/p>\n\n\n\n<p>To require a two digit country code, e.g., 01-678-910-1234, the pattern [0-9]{2}-[0-9]{3}-[0-9]{3}-[0-9]{4} could be used.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#the-following-attributes-can-be-set-in-the-flow-to-display-custom-validation-messages\"><\/a>The following attributes can be set in the Flow to display custom validation messages:<\/h3>\n\n\n\n<p>msg: Toggle Active | msg: Toggle Inactive | err: Bad Input | err: Pattern Mismatch | err: Range Overflow | err: Range Underflow | err: Step Mismatch | err: Too Long | err: Type Mismatch | err: Value Missing |<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#by-default-the-following-messages-are-displayed-when-a-validation-set-has-failed\"><\/a>By default the following messages are displayed when a validation set has failed.<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>badInput: Enter a valid value.<\/li><li>patternMismatch: Your entry does not match the allowed pattern.<\/li><li>rangeOverflow: The number is too high.<\/li><li>rangeUnderflow: The number is too low.<\/li><li>stepMismatch: Your entry isn&#8217;t a valid increment.<\/li><li>tooLong: Your entry is too long.<\/li><li>typeMismatch: You have entered an invalid format.<\/li><li>valueMissing: Complete this field.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#these-default-messages-can-be-overridden-by-setting-the-following-attributes-in-the-flow\"><\/a>These default messages can be overridden by setting the following attributes in the flow.<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>messageWhenBadInput<\/li><li>messageWhenPatternMismatch<\/li><li>messageWhenRangeOverflow<\/li><li>messageWhenRangeUnderflow<\/li><li>messageWhenStepMismatch<\/li><li>messageWhenTooLong<\/li><li>messageWhenTypeMismatch<\/li><li>messageWhenValueMissing<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#the-following-attributes-control-the-text-displayed-beneath-the-toggle-input-in-each-of-its-states\"><\/a>The following attributes control the text displayed beneath the&nbsp;<code>toggle<\/code>&nbsp;input in each of its states:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>messageToggleActive<\/li><li>messageToggleInactive<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#formatter\"><\/a>Formatter<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC#formatter-usage\"><\/a>formatter usage<\/h4>\n\n\n\n<p>The&nbsp;<code>formatter<\/code>&nbsp;attribute can be set to the following for number input fields.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>percent<\/li><li>percent-fixed<\/li><li>currency<\/li><li><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Installation<\/h2>\n\n\n\n<p>New Version 1.0 10\/10\/22 <a href=\"https:\/\/login.salesforce.com\/packaging\/installPackage.apexp?p0=04t5G0000043wsRQAQ\">Production<\/a> <a href=\"https:\/\/test.salesforce.com\/packaging\/installPackage.apexp?p0=04t5G0000043wsRQAQ\">Sandbox<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/login.salesforce.com\/packaging\/installPackage.apexp?p0=04tB0000000N9Fc\">Original Version<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/alexed1\/LightningFlowComponents\/tree\/master\/flow_screen_components\/lightningInputFSC\">Source Code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a a Flow-optimized version of the&nbsp;Lightning Input&nbsp;component, which includes the following input types: checkbox | checkbox-button | color | date | datetime-local | email | month | number | password | radio | range | tel | time | toggle | url | week A Swiss-Army Knife of a component, capable of serving [&hellip;]<\/p>\n","protected":false},"author":35209406,"featured_media":0,"parent":0,"menu_order":41,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5459","page","type-page","status-publish","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/PasQ6m-1q3","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/pages\/5459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/users\/35209406"}],"replies":[{"embeddable":true,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/comments?post=5459"}],"version-history":[{"count":3,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/pages\/5459\/revisions"}],"predecessor-version":[{"id":29976,"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/pages\/5459\/revisions\/29976"}],"wp:attachment":[{"href":"https:\/\/unofficialsf.com\/wp-json\/wp\/v2\/media?parent=5459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}