How to create a modal for displaying "About" infor

Help
1

I am trying to display a Modal window for display “About” information pertaining to my application. I have create an EndPoint /about to trigger the “About” page/view. I have linked this to the “About” link in the application using the href=/about. The problem I am having is that when the page is triggered nothing is displayed. If I comment out the code and display a "<h1>" message I see this on the screen so I know that the flow is working as expected. The problem is, No Modal is displayed. Can anyone provide some guidance on why this might be happening?

thanks

ed

2

Hi @Edward_Szajner,

So, there are two ways I interpret your message. Let me know if I understand correctly.

If you intend to create an in-page modal (some may call it a popup), that wouldn’t require a new /about page. Typically modals are implemented client-side using HTML, CSS, JS. Typically this can be done using a client-side JS modal library. Like so:

If your intention is just to navigate to a new page, that should work.

Let me know if I read things right. Happy to explain further.

3

That is exactly what I want to do. I am not 100% sure I understand how the code is going to be executed. I need a way to trigger the About box when the user clicks on the about link from the menu bar. Where do I create the HTML code and store it. That is why I created the /about as that is where I have the modal code

ed

5

@Edward_Szajner, thanks for the clarification. Yes, this can be done using client-side HTML/JS. If the “About” link is in your Layout, you can include the code there. Or, you can put it inside of a component, and then include that into your Layout.

The HTML/JS would just need to live on the same page as the link.

7

I think I understand the concept and I have now created an “about” component that contains the test code. Currently it is simply displaying some <h1> type headings so I know when it is invoked. What I am still struggling with, and a code snippet would go a long way, is how to incorporate this into the “About” link. I can put the component reference, {{component “about”}} into the layout code but that is invoked when the main page is created. This is not what I want. I only want it invoked when the “About” link is actually clicked. The only way I know is to add the code reference to the “href=” tag. Unfortunately I am not able to figure out how to incorporate the “Component” reference there. Hope that makes sense

thanks

ed

9

FYI,

I am really struggling with trying to render any bootstrap objects, modals, pull-downs, etc in my application. I have tried “components” and/or inline HTML code in my “layout” to no avail. No matter what I do I get no visible output. For instance, If I create a “modal” button or pulldown menu I can see both the button and menu option in the app. When I click on them nothing happens. I know the code works outside of the Losant environment so I am trying to figure out what might be causing the issue.

On a side note, I am finding it very difficult to debug in the environment. I am new to this environment so I am sure there is something I am missing. I literally have no clue what is going on or how to debug the code to figure it out. Any help in this space would also be greatly appreciated

thanks

ed

11

Hi @Edward_Szajner,

Thanks for the follow-up. We are working on an example for you to create a modal within an Experience. It should provide some guidance on how this works and how to think about it. Stay Tuned.

Just so you know. We are working on the Experience Course for Losant University. There will be an announcement when that is released.

For now, here are some great resources you should peek through to learn more about Experiences:



12

I have already been through the Losant University courses and I look forward to participating in the Experiences one. I have also gone through the “Experience Views Walkthrough” to help bootstrap, no pun intended, my application development. There are certainly a lot of pieces to the puzzle and I am slowing putting them all together. I really appreciated the examples for the Modal. As stated in a previous post, I am basically having difficulty rendering any HTML object successfully. I am sure it is something inherently wrong with my understanding of how this whole process and/or environment works.

thanks

ed