How to use ContentAccordion Item

How to use ContentAccordion Item

  

Hi Everyone,

I plan to use Content Accordion item to display my data.

However, if the data for the column is empty, it should not appear in content accordion item.

For example, my database table have 4 columns, Name (Mandatory), Email Address, Phone Number, EnquiryDetails (Mandatory).

There might be possibility that  email address, phone number is empty.

So what i plan to do is use AccordionItem.

Accordion Item : Name

If/else to check if email address is empty

Accordion Item: Email address (It will be hide if the email address is empty)

If/else to check if phone number is empty

Accordion Item: phone number (It will be hide if thephone number is empty)

Accordion Item: Enquiry Details.

For illustration, Only phone number is empty, thus the accordion item will not be display which will result an empty space there. 

I would like to seek advice from the community, how can i approach to this?


Hi Jace,

If you want to use Accordion to display your data, you can:

Drag an 'Accordion' widget to the flow; Drag 4 'Accordion Item' to the 'Items' placeholder of 'Accordion';

Enclose the 'Accordion Item's in Containers and set the Display property of those Containers to something like this (  E.g., for the phone number : GetEnquiry.List.Current.Enquiry.PhoneNumber <> NullTextIdentifier()   )

André Rodrigues wrote:

Hi Jace,

If you want to use Accordion to display your data, you can:

Drag an 'Accordion' widget to the flow; Drag 4 'Accordion Item' to the 'Items' placeholder of 'Accordion';

Enclose the 'Accordion Item's in Containers and set the Display property of those Containers to something like this (  E.g., for the phone number : GetEnquiry.List.Current.Enquiry.PhoneNumber <> NullTextIdentifier()   )

I have tried your method, but when it detect that it is null, it did not display and leave a huge white space.


Jace Jace wrote:

André Rodrigues wrote:

(...)

I have tried your method, but when it detect that it is null, it did not display and leave a huge white space.

The Display Condition should be   (...).List.Current.Enquiry.PhoneNumber <> ""   (and not NullTextIdentifier() - my mistake). 

You should have something like this:


 

André Rodrigues wrote:

Jace Jace wrote:

André Rodrigues wrote:

(...)

I have tried your method, but when it detect that it is null, it did not display and leave a huge white space.

The Display Condition should be   (...).List.Current.Enquiry.PhoneNumber <> ""   (and not NullTextIdentifier() - my mistake). 

You should have something like this:


 

Hi,

Yes i make changes already. It is displaying correctly. But my concern is that it will leave a blank space in between other accordion item which make it not very nice. So i am asking if there is any approach i can do to move up other accordion item to fill up the empty space.


Hi Jace,

If the accordion item is still there, you might have placed the container in the wrong place.

As you can see here, it doesn't display when there is no data.

Take a look at the attached .oml


Hello,

I still did not manage to figure out how to remove the space in between when the accordion item did not display. 

The empty space is for email accordion item. As email value is null, the accordion item will be hide thus result a white space in between.

As you can see, it doesn't look nice with such a big space in between. I would like to know how i can handle this? I want each accordion item to have a fixed space between them.



Hi,

besides this is a matter of trial and error and think how to solve it with css etc.

but basically, why do you even want to use an accordeon for those small amounts of info?


J. wrote:

Hi,

besides this is a matter of trial and error and think how to solve it with css etc.

but basically, why do you even want to use an accordeon for those small amounts of info?


Hi J,

Even without using accordion for these info, the issue is still present. The field will be hide and there is still blank/white space. Or if you have any advice i could present it?


Hi Jace,

Can you share your .oml so we can take a closer look?

Hi,

If you are using a List Records, be sure to set the Line Separator to NONE, as if it is set to NEW LINE, it will create an "extra line" if the element occupy the entire extension of the parent.

That's seem to be the case here.

Cheers,
Eduardo Jauch

Hello,

I have attached the oml i have tried to work on. 

Solution

Hi Jace,

Remove the "break lines" you inserted and the spaces will go away...

Cheers,
Eduardo Jauch

Solution

Hello Jace, removing the break lines solved the problem with the spaces? :)

Hello Eduardo,

Thank you very much, the problem is solved. There is no white space.