Navigation using perspective accordion

Ignition
1

Can someone help me with navigation using the accordion component in perspective? I can provide a path but there is no option for a navigation path.

2

The accordion component is for embedding views. You probably want to use the Menu Tree

3

Hi Amy,

Thanks for the response but the project scope requires to use of accordion for navigation. I tried using Menu Tree but that's not the case here.

4

You'll have to improvise if using the Accordion for navigation. It's only meant to embed Views, but you can do anything you want with a View.

For example, you could easily make a View out of nothing but a Label, and clicking that Label could perform a Navigation Action. So really, you just have to figure out how to place your Views (one-per-body, ore many-per-body) and provide them the navigation paths as params (or a list of paths if many-per-body).

5

Hi,

Can you show with images if possible?

6

Suhel, can you show an example of where someone used an accordion for navigation?
Can you show with images if possible?

Otherwise you are asking us to come up with a way of using a component for a purpose for which it was not designed. Why would we do that?

1 Like
7

Hi,

image
image375×503 36.3 KB

You can see in the image that in accordion with an item we have to select a view then we have to create a view parameter to navigate the path. Here in my case, I do not know how to add those parameters.

8

The items.X.header.content.viwPath parameter determines the path to another view you have created and that will be shown inside the accordion section defined by items. You create the other views first and then they will be listed in the items.X.header.content.viwPath property where you can select the one that you want.

Accordions are not for navigation. They are for showing multiple other views inside the accordion while staying on the same view.

9

I have created a view but it is not showing there. In the view parameter, we have to create an item path by ourselves.

10

In your screenshot you seem to be trying to set a view for the header. Normally we add views to the body,

Accordian view path

The view has to be in the same project. If it is then it should be listed. If it isn't then try closing the view with the Accordion component, save the project and reopen the view.

1 Like
11

I had a similar project requirement and yes you can easily use an accordion for this purpose.

A simple example, create a view with a single button with PARAMS viewPath. Have a script on the button that opens the view with the path from PARAMS.

Then in the accordion, this is the view to embed. Simply pass in the view you want to open.

I'll be happy to throw something together if after making an attempt you still can't get it.

1 Like
12

Hi,

Can you share the same using images? This way I am unable to get it.

13

Tried it but not working for me.

14

Can you show your work? Simply export the views and attach to this topic.

15

I reread my post and probably didn't do a great of explaining how it "could" work, so here's an example. You will need to update as needed... the button only prints the viewPath, you will need to add the appropriate code for navigation.

AccordionNav_2024-03-04_1013.zip (25.0 KB)

16

HVAC_2024-03-04_2045.zip (29.0 KB)
One view in which I took accordion from where I have to provide a name and navigation path for that other screen.

17

Accordion navigation
Accordion navigation673×651 62.2 KB

  1. As explained in post #10, you have specified items.0.header.content.type : view when you probably want text (but we don't know as you haven't provided a mock-up of how you want it to look).
  2. items.0.header.content.viewPath is empty. There are two views available in the dropdown but you haven't selected either.
  3. items.0.body.content.viewPath is empty. The same two views are available in the dropdown but you haven't selected either.

Perspective doesn't deal in "screens". It works with pages and views.

If you want help with this then please,

  1. Show us the part of the project scope where you are required to use an accordion for navigation.
  2. Show us a mock-up of how you think this should work.
  3. Show us a screen grab of the view you are trying to embed in the accordion.
  4. Tell us if you are really trying to embed a view in the header or do you want text in the header.

Please number your responses so you and we can be sure you haven't missed anything.

Note that in the project you posted there are only two views - the one with the accordion and the Column Breakpoint view which is too big to fit in your accordion. It is not at all clear what you are trying to do.

2 Likes
18

I am simply looking for navigation. The below image (refer to the attached link) which I sent first shows that a person who did this has created an additional property in which you can see the navigation path and the text you want to see. It will act like a button but it will be done using accordion.

In my attachments where I attached two views. In the first view, I took accordion in which I want to add text and navigation normally what we use on buttons. Suppose I have a view of the chiller and I want to navigate to that screen, normally I can do it with buttons but here I want to do it with accordion. The same thing when we press that button it will navigate to the view.

I aim to create the viewparam as attached in the link. That way I can add a path for navigation and text for the reference.

19

Sorry, but if you refuse to answer questions then there is little we can do to help.