btihen
I am trying to build an admin panel - in one field I want a simple dropdown menu.
I found a way to do this, but I think I found a round-about way and hoping there is a straight forward way.
Here is what I did:
- add all the users to the assigns (so I could list them in the dropdown)
- hide the normal field that submits the user_id (but keep the value there) so that on save the value is submitted (probably possible to do from the select, but I couldn’t figure out how).
- add a select with all the users (and with the initial ‘selected’ value the same as the user_id in the form.
- wrote a handler to update the user_id in the changeset when the selected value changes.
Here is the code (for better or worse - but it works):
def render(assigns) do
~H"""
<div>
<.header>
<%= @title %>
<:subtitle>Use this form to manage domains records in your database.</:subtitle>
</.header>
<.simple_form
for={@form}
id="domains-form"
phx-target={@myself}
phx-change="validate"
phx-submit="save"
>
<.input field={@form[:domain_name]} type="text" label="Domain name" />
<.input field={@form[:domain_url]} type="text" label="Domain URL" />
<.input field={@form[:domain_descriptioin]} type="text" label="Domain descriptioin" />
<%!-- <.input field={@form[:user_id]} type="number" label="User ID" /> --%>
<.input field={@form[:user_id]} type="hidden" />
<label for="user_id">User</label>
<select name="user_id" id="user_id" phx-change="select_user">
<%= for user <- @users do %>
<%= if user.id == @domains.user_id do %>
<option value={user.id} selected><%= user.username %></option>
<% else %>
<option value={user.id}><%= user.username %></option>
<% end %>
<%!-- <option value={user.id}><%= user.username %></option> --%>
<%!-- <% selected = if user.id == @form[:user_id], do: "selected", else: "" %> --%>
<%!-- <option value={user.id} {selected}><%= user.username %></option> --%>
<% end %>
</select>
<:actions>
<.button phx-disable-with="Saving...">Save Domains</.button>
</:actions>
</.simple_form>
</div>
"""
end
@impl true
def update(%{domains: domains} = assigns, socket) do
# add the full list of users for the dropdown selector
users = ClearSync.Core.Accounts.list_users()
socket = assign(socket, users: users)
changeset = WorkDomains.change_domains(domains)
{:ok,
socket
|> assign(assigns)
|> assign_form(changeset)}
end
# update the user chosen in the changeset when the selector changes who is selected
def handle_event("select_user", %{"user_id" => user_id}, socket) do]
changeset =
socket.assigns.domains
|> WorkDomains.change_domains(%{"user_id" => String.to_integer(user_id)})
# |> WorkDomains.change_domains(%{"user_id" => parsed_user_id})
{:noreply, assign_form(socket, changeset)}
end
This works, but
- it seems clumsy, I am assuming I have overlooked something fundamental
- my hidden .input field is hidden, but takes up visible white space
Note: I haven’t caught up on understanding the newest LiveView changes - I am sure my approach reflects that, in addition to helping me cleanup the whitespace and create a more elegant solution, If its clear what fundamental misunderstanding(s) I have - I would appreciate knowing where I can learn more - I will try to go through some liveview 1.7 tutorials, but if there is a short cut short of starting over, I would appreciate that.
Thanks,
Bill
Trending in Questions
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
Hello,
I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
So my question is quite simple and i have found no conclusive answer on forum, google or AI.
Should we use :erlang.float for Integer to ...
New
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
New
Documentation
While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
Other Trending Topics
I am happy to introduce the very α version of the new programming language compiled to BEAM.
Welcome Cure.
It has literally three kille...
New
Hi there! We created Gust: A task orchestrator inspired by Airflow.
For those who have never heard about Aiflow, it’s a Python-based wor...
New
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
Aludel - LLM Evaluation Workbench
Aludel is an embeddable Phoenix LiveView dashboard for evaluating and comparing LLM prompts across mult...
New
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming











Showing Posts 4 to 1- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
btihen
Thanks for pointing me in the right direction and the documentaion.
btihen
Thanks for the example - works well. Definately, much simpler.
bkilshaw
@Mostalive covered it for the most part; using the build in core_components you can do something like this as long as you’re passing the users in.
It might be better to just pass the list of tuples into the component instead of the list of full users depending on the situation.
You only need to pass in a “value” if you want to pre-select a specific value. Using the code above the component is smart enough to pre-select the correct user if you use the form component on an edit page.
Mostalive
I am relatively new, but will need something like this (and am working through a book, so I can find some things
). Hope this helps.
A shortcut might be to generate a new application, and have a look through CoreComponents for the html elements that you use.
<.input type="select">will generate a dropdown and save the result in a field.I hardcoded the options here so it is easier to see where the id goes.
I used a few threads here to find the
<.input type="select", but reading throughCoreComponentswas the most useful. With thevalue=attribute I could choose the second value, but I don’t know if that is necessary when you have a changeset with the field.