<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="331903" data-post-id="331903">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Neophen" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Neophen/120/20004_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Neophen
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Now the last issue i’m having is on trying to update the page resource i get a nested error:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">form.source.source.errors #=&gt; [
  %Ash.Error.Invalid.NoSuchInput{
    calculation: nil,
    resource: Octafest.Pages.Block.HeroMedia,
    action: :update,
    input: "type",
    inputs: MapSet.new([:description, :title, :image, :button, :navigation_type,
     "button", "description", "image", "navigation_type", "title"]),
    did_you_mean: [],
    splode: Ash.Error,
    bread_crumbs: [],
    vars: [],
    path: [:blocks, 0],
    stacktrace: #Splode.Stacktrace&lt;&gt;,
    class: :invalid
  }
]
</code></pre>
<p>Although my inputs_for doesn’t have any “type” input</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">  def block(%{type: :hero_media} = assigns) do
    ~H"""
    &lt;div class="space-y-4"&gt;
      &lt;p class=""&gt;
        Hero media
      &lt;/p&gt;

      &lt;.image_form field={@form[:image]} /&gt;
      &lt;.input field={@form[:title]} type="text" label={dgettext("forms", "title")} /&gt;
      &lt;.input field={@form[:description]} type="text" label={dgettext("forms", "description")} /&gt;
      &lt;.input
        field={@form[:navigation_type]}
        type="text"
        label={dgettext("forms", "navigation_type")}
      /&gt;
      &lt;.button_form field={@form[:button]} /&gt;
    &lt;/div&gt;
    """
  end
</code></pre>
<p>Should i be using something union specific? couldn’t find anything in the docs<br>
Basically what i’m doing is creating a page_builder and if all is good the union type looks like should handle all my needs:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/5/8/5868143a9309c906e6ac48d3efb04ba0dd9d6884.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/5868143a9309c906e6ac48d3efb04ba0dd9d6884" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/5/8/5868143a9309c906e6ac48d3efb04ba0dd9d6884_2_690x353.jpeg" alt="image" data-base62-sha1="cC50lN2wiBVqclPyHfb7n1YGerO" width="690" height="353" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/5/8/5868143a9309c906e6ac48d3efb04ba0dd9d6884_2_690x353.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/5/8/5868143a9309c906e6ac48d3efb04ba0dd9d6884_2_1035x529.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/5/8/5868143a9309c906e6ac48d3efb04ba0dd9d6884.jpeg 2x" data-dominant-color="CECECE"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1200×615 36.4 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331903" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-create-ashphoenix-form-with-union-field/64092/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-331903" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331903"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="331906" data-post-id="331906">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="zachdaniel" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/zachdaniel/120/31980_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  zachdaniel
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Ash</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Are you using a union type where there is a <code>tag</code> attribute? If so you, may need something like:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">tag: "type",
cast_tag?: false
</code></pre>
<p>IIRC that is what the option is called.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331906" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-create-ashphoenix-form-with-union-field/64092/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-331906" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331906"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="331922" data-post-id="331922">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Neophen" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Neophen/120/20004_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Neophen
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Ok figured it out, thanks to Zach!</p>
<p>Correct me if i’m wrong Zach.</p>
<p>If you don’t want to have the type of the module inside the embedded field,<br>
then do this in the union type:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/e/2/e2d567dbd8a32d84d440ef27cae23e9cb165e6f8.png" data-download-href="https://forum.elixirforum.com/uploads/default/e2d567dbd8a32d84d440ef27cae23e9cb165e6f8" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/e/2/e2d567dbd8a32d84d440ef27cae23e9cb165e6f8_2_690x446.png" alt="image" data-base62-sha1="wmF7VJh3L3SBmRFfbYlqm3C0npe" width="690" height="446" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/e/2/e2d567dbd8a32d84d440ef27cae23e9cb165e6f8_2_690x446.png, https://forum.elixirforum.com/uploads/default/original/3X/e/2/e2d567dbd8a32d84d440ef27cae23e9cb165e6f8.png 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/e/2/e2d567dbd8a32d84d440ef27cae23e9cb165e6f8.png 2x" data-dominant-color="F2F2F3"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">857×555 40.2 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>But i would suggest to add the type into the embedded union resource,<br>
if you agree then ignore the above and add the <code>type</code> attribute to the resource like so:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/1/d/1db84493b31f4fc00c0867aaea5cda4a75547728.png" data-download-href="https://forum.elixirforum.com/uploads/default/1db84493b31f4fc00c0867aaea5cda4a75547728" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/1/d/1db84493b31f4fc00c0867aaea5cda4a75547728_2_690x288.png" alt="image" data-base62-sha1="4eUDBmAj9Mbgn2p4OL9jejUUlLi" width="690" height="288" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/1/d/1db84493b31f4fc00c0867aaea5cda4a75547728_2_690x288.png, https://forum.elixirforum.com/uploads/default/original/3X/1/d/1db84493b31f4fc00c0867aaea5cda4a75547728.png 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/1/d/1db84493b31f4fc00c0867aaea5cda4a75547728.png 2x" data-dominant-color="F2F1F0"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">938×392 42.5 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331922" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-create-ashphoenix-form-with-union-field/64092/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-331922" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331922"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="331952" data-post-id="331952">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Neophen" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Neophen/120/20004_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Neophen
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks Zach got most of the things working, UNIONS ARE AMAZING:</p>
<div class="youtube-onebox lazy-video-container" data-video-id="JmJGLK82Zds" data-video-title="Lets make a page builder - Ash Framework, Elixir, Phoenix, Liveview" data-video-start-time="" data-provider-name="youtube">
  <a href="https://www.youtube.com/watch?v=JmJGLK82Zds" target="_blank" class="video-thumbnail" rel="noopener nofollow ugc">
    <img class="youtube-thumbnail" src="https://img.youtube.com/vi/JmJGLK82Zds/maxresdefault.jpg" title="Lets make a page builder - Ash Framework, Elixir, Phoenix, Liveview" width="690" height="388">
  </a>
</div>

<p>Now will try to swap two blocks <img src="https://forum.elixirforum.com/images/emoji/apple/smiley.png?v=15" title=":smiley:" class="emoji" alt=":smiley:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331952" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-create-ashphoenix-form-with-union-field/64092/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-331952" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331952"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="332851" data-post-id="332851">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Neophen" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Neophen/120/20004_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Neophen
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Anyone who worked on swapping unions in an array? <a class="mention" href="/u/zachdaniel" rel="nofollow">@zachdaniel</a> maybe you could point me in the right direction,<br>
The only other thing i think i can do is, remove both subforms and create them from scratch.<br>
Or add an order field and somehow render them sorted by the order?</p>
<p>I’m having great difficulty trying to figure this out.</p>
<p>Basically i have a move and down buttons in the page builder which should swap two blocks, here’s where i’ve got to with code but not sure what to do in the last part:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">  def handle_event(
        "move_block",
        %{"id" =&gt; id, "direction" =&gt; direction, "path" =&gt; path_a},
        socket
      ) do
    form = socket.assigns.form

    direction_offset =
      case direction do
        "up" -&gt; -1
        "down" -&gt; 1
        _ -&gt; 0
      end

    # todo take the last part of the id and move it up if it is not the first
    index =
      String.split(id, "_")
      |&gt; List.last()
      |&gt; String.to_integer()

    dbg(index)
    blocks = form[:blocks].value
    block_count = length(blocks)

    new_index =
      (index + direction_offset)
      |&gt; max(0)
      |&gt; min(block_count - 1)

    dbg(new_index)

    if(index == new_index) do
      {:noreply, socket}
    else
      path_b = "form[blocks][#{new_index}]"
      dbg(path_a)
      dbg(path_b)
      block_a = AshPhoenix.Form.get_form(form, path_a)
      block_b = AshPhoenix.Form.get_form(form, path_b)

      dbg(block_a)
      dbg(block_b)

      # form =
      #   form
      #   |&gt; AshPhoenix.Form.update_form(path_a, fn -&gt; block_b end, mark_as_touched?: false)
      #   |&gt; AshPhoenix.Form.update_form(path_b, fn -&gt; block_a end, mark_as_touched?: false)

      # {:noreply, assign(socket, :form, form)}
      {:noreply, socket}
    end
  end
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="332851" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-create-ashphoenix-form-with-union-field/64092/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-332851" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332851"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="332852" data-post-id="332852">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="zachdaniel" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/zachdaniel/120/31980_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  zachdaniel
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Ash</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>At the moment, direct manipulation of the child forms is the best way to do it, but I’m going to be revisiting this this week/next week, specifically aiming to solve the problem of the complexities around sortable nested forms: <a href="https://github.com/orgs/ash-project/projects/3?pane=issue&amp;itemId=68688329" class="inline-onebox" rel="noopener nofollow ugc">Ash Framework Roadmap · GitHub</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="332852" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-create-ashphoenix-form-with-union-field/64092/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-332852" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332852"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="332856" data-post-id="332856">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Neophen" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Neophen/120/20004_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Neophen
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Could you be any more awesome!!!<br>
That even has a solution for now as well!!!<br>
Thank you!!!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="332856" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/how-to-create-ashphoenix-form-with-union-field/64092/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-332856" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332856"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>