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 the`Sage 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: "sage-icon-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`

Dynamic Select

Deprecated

Working with theSage Dynamic Select Input (Select2)

Error Handling

Working with the`Sage Dynamic Select Input (Select2)`