Dynamic Select

A description is about the dynamic select.


Deprecated

Dynamic Select is deprecated and no longer recommended. Please reach out for support or any questions.

Working with theSage Dynamic Select Input (Select2)

The dynamic select input is a sagified version of the select2 input that resides in Kajabi Products. The input fuctionality leverages the Javascript library select2 and includes several options for tailoring the input to the UI. The input can retrieve options from any arbitrary API that will return validly structured JSON.

Basic usage and complete documentation ca be found here.

Error Handling

Much like other sage inputs, the dynamic select includes options to render error messages from the server. By using the has_error attribute, one can trigger the erros states and print an error message that gets placed below the input.

  
  // Component API
  name: "Input Form Name",
  label: "Input Label",
  id: "Input id",
  required: true
  has_error: false
  message: "Error message goes here"
  url: "Endpoint for API",
  default_value: "Prefill select input with default value",
  default_text: "Prefill select input with default title",
  theme: "Choose Sage or Bootstrap for legacy input",
  search: "Allow user to search through retrieved results",
  clear: "Allow user to clear input value"

  // Example Implementation
  sage_component SageDynamicSelect, {
    name: "site[home_landing_page_id]",
    label: "Landing Page",
    id: "site_home_landing_page_id",
    url: admin_site_select_options_path(site, :landing_page, { published: true }, format: :json),
    default_value: site.home_landing_page.id,
    default_text: site.home_landing_page.title,
    theme: "sage",
    search: true,
    clear: false
  }

  

Sage Component

SageDynamicSelect
<%= sage_component SageAlert, {
  color: "warning",
  title: "Deprecated",
  desc:  "Dynamic Select is deprecated and no longer recommended. Please reach out for #{link_to "support or any questions", "/pages/support"}.".html_safe,
  icon_name: "danger-filled",
} %>

<h3>Working with the<code>Sage Dynamic Select Input (Select2)</code></h3>
<p>
  The dynamic select input is a sagified version of the select2 input that resides in <code>Kajabi Products.</code> The input fuctionality leverages the Javascript library select2 and includes several options for tailoring the input to the UI. The input can retrieve options from any arbitrary API that will return validly structured JSON.<br/> <br/> Basic usage and complete documentation ca be found
  <a href="https://select2.org/getting-started/basic-usage" target="_blank" rel="noopener"><code>here</code></a>.
</p>

<h4>Error Handling</h4>
<p>Much like other sage inputs, the dynamic select includes options to render error messages from the server. By using the <code>has_error</code> attribute, one can trigger the erros states and print an error message that gets placed below the input.</p>

<pre class="prettyprint">
  <code>
  // Component API
  name: "Input Form Name",
  label: "Input Label",
  id: "Input id",
  required: true
  has_error: false
  message: "Error message goes here"
  url: "Endpoint for API",
  default_value: "Prefill select input with default value",
  default_text: "Prefill select input with default title",
  theme: "Choose Sage or Bootstrap for legacy input",
  search: "Allow user to search through retrieved results",
  clear: "Allow user to clear input value"

  // Example Implementation
  sage_component SageDynamicSelect, {
    name: "site[home_landing_page_id]",
    label: "Landing Page",
    id: "site_home_landing_page_id",
    url: admin_site_select_options_path(site, :landing_page, { published: true }, format: :json),
    default_value: site.home_landing_page.id,
    default_text: site.home_landing_page.title,
    theme: "sage",
    search: true,
    clear: false
  }

  </code>
</pre>


Property Description Type Default

url

required

API URL for retrieving select options

String

nil

label

required

Label for the input

String

component.id

name

required

Input name

String

nil

id

required

Input ID

String

nil

has_error

Enabling this property adds the .sage-form-field--error class to the component.

Boolean

nil

message

Sets the message text for the component.

String

nil

placeholder

Displays placeholder text when the input is empty.

String

component.label || component.id

default_value

Default value for the input

String

nil

default_text

Default text for the input

String

nil

paginate

Allows input to paginate results per 25 items

Boolean

nil

search

Displays a search bar for users to search through results

Boolean

false

clear

Displays an "x" button for users to clear the current value.

Boolean

false

required

Makes input selection required

Boolean

nil

theme

Choose from legacy UI or Sage

string

sage