Basic Phoenix UI that fetches pages

Phoenix Forum Questions / Help
,
1

I would like to set up the basic UI shown below using Phoenix

Basic-UI
Basic-UI1048Ă—556 5.43 KB

I would like when a user clicks any of the buttons(or links) on the left e.g Content 1, a page is loaded in the Content Loading Pane and when Content 2 is clicked, another page is loaded in the
Content Loading Pane only.

Seems, this will be solved best by liveview, but am not sure how.

I think I will have to write Content 1.html.heex , Content2.html.heex and Content3.html.heex and place then in lib\app_web\templates\page but not sure how to fetch them and to “bind” them to fill the Content Loading Pane only.

Thanks.

Notes

  1. I dont have a ruby background. Most books,tutorials and people assume
    all alchemist have a ruby background.
  2. I have a basic Javascript backgound and a basic AJAX and SPA’s understanding.
  3. I am aware that some js/html/css maybe required and have made sections and divs, am not sure how I will call Content2.html.heex by an elixir funtion.
2

Check out the LiveBeats repo and see if you can use nav.ex as inspiration

1 Like
3

I am novice. I have looked at nav.ex, couldn’t wrap my head around it.To you may be it’s a pretty basic module, for me it’s tricky. Am looking where an equivalent of a html page or a pageXXX.html.heex is being fetched and “pasted” on the page being viewed on the browser but I couldn’t figure it out.

I think my whole approach is wrong probably, insted of fetching full html.heex pages, seems to be a nifty way to fetch “dynamic content”.

4

I recommend to first do a small course on LiveView to have a better understanding how it works. It’s not as simple as fetching a pageXXX.html.heex.

I would recommend this course Phoenix LiveView Free Course | The Pragmatic Studio it’s free.

2 Likes
5

Thanks, I have found what I was looking for in the course you recommended.

https://agile-equatorial-stoat.gigalixirapp.com/servers?id=1