Empty Accordion in Perspective

Ignition
1

Hi, today I tried using Accordion component but it seems like it does not allow me to use it with no items in it. My original idea was to have user create item instances in Accordion and then save it. For displaying this I will run query and populate the accordion with item instances.

If I delete the default item that comes with the Accordion in designer, it seems to be fine with it. But in the Perspective session, there is a header that cannot be expanded.

This is how it looks in perspective session:
image

And this is how it looks in the designer:

image
image1221×532 31.4 KB

Am I missing something or is this a bug?

Thanks all
Jakub

2

You could create your own accordion using a flex repeater and some CSS transitions.
For the view you put in the flex repeater:

  • Give it a header container with a set basis and 0 grow/shrink. Then give it another container or embedded view for the content, with a basis of auto, 0 grow/shrink, and in the styles add a max-height of 0 and a transition of max-height 0.3s ease-in-out.
  • Add an on-click event to the header container that sends a message with the value for view.params.index and receive it on the root or somewhere in the same view. That message handler should update the content container's max-height to 9999 only if the index received in the payload matches the index in the view.params, otherwise set the content's max-height back to 0.
    That should yield the same effect as the accordion as you add them to a flex repeater. Make sure you set the instance basis to auto as well.
1 Like
3

Hi,
You can create a default view inserted by a script on the "items" accordion property to avoid this behaviour. But it doen't remove the header.

If you really want to remove the header, the only way I found is to set the CSS property "display" to "none" for the header.

You can do this with this code in the "stylesheet.css" in style folder (you can show it with the right click on the "style" folder), and then apply the CSS class "hideAccordionHeader" on the accordion.

.psc-hideAccordionHeader .ia_accordionComponent__header {
	display: none;
}

Note: It will remove all header for this accordion, remove the class when there is at least one item. For that you can use a binding on the class property and use an expression like that.

if(len({this.props.items}) >= 1,"","hideAccordionHeader")

If you need a permanent class on the accordion, just add it in both cases.

Have a nice day
Steven Cheron

4

Hi Daniel, I actually did that before discovering that there is actually a component for that in Ignition. I wanted to get rid of extra complexity and use what is available.

1 Like
5

Hi Steve, I have to investigate the Ignition's stylesheet.css. I would like to keep the settings default so I can distribute the project to non modified gateways as well.

6

For now, I ended up having one item in the accordion and set the header height to 0px. I dont like this solution but it seems to be the simplest.
image

I can still see it there but I can live with that:

image
image789×316 1.04 KB

7

The "stylesheet.css" is a part of the project, so when you export and import the project to another gateway, the "stylesheet.css" will be here.

Your solution is similar to mine. I have the same result as you, just a little border on the top of the accrodion.

Best regards,
Steven Cheron

8

Interestingly when I set up a binding on items property that returns empty list it renders okay in the browser with nothing in it.

1 Like
9

Steven, this helped us quite a bit. I was wondering, could you take it a step further and also hide all the borders around the component and the border between accordions? We want to utilize this component as a way to essentially bring in "dynamic" components by passing a list of embedded views to display when a page loads.