collapsed functionality

collapsed functionality

  

how to build a collapsed functionality? In the attached pic there are three collapsed functionality. My Region, My Language, Switch roles. I want to built the same UI as well as if 1 is open then other 2's are automatically collapsed i.e at a time only 1 can by open. Could you please guide me how to maintained that functionality.

Hi Lovish,

Does the Accordion SilkUI patterns works for you?

https://silkui.outsystems.com/Patterns_Web.aspx#Web_Content_Accordion

Cheers,

José

Hi Lovish,

are you building a mobile app?

Silk UI already provides some patterns... Take a look at the "Section Expandable" one.

https://silkui.outsystems.com/Patterns_Mobile.aspx#Mobile_Content_SectionExpandable

If you're doing a Web App there's also the "Accordion".

https://silkui.outsystems.com/Patterns_Web.aspx#Web_Content_Accordion

i want "My Region" and "My Language" to be in one accordion and "Switch roles " in second according. And I want its collapse functionality to be working as it is one accordion. 

Hi Lovish,

I show you how to do it in your other post. I even attached an espace https://www.outsystems.com/forums/discussion/33125/accordion/

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Lovish,

I show you how to do it in your other post. I even attached an espace https://www.outsystems.com/forums/discussion/33125/accordion/

Regards,

Marcelo

i want to place the "Restore default after "My Language" in between and it is expandable


one more thing i want to add some icon or image instead of arrows which i mentioned in the attachment. Is it Custmizable?

Marcelo Ferreira wrote:

Hi Lovish,

I show you how to do it in your other post. I even attached an espace https://www.outsystems.com/forums/discussion/33125/accordion/

Regards,

Marcelo


Hi Marc, is there any way i can change the arrow symbol with image or icon. Please let me know

Hi,

You can copy AccordionItem from webpatterns and create your own with the icon you want. You just need to make sure if the one on webpatterns change you also need to change yours.

Regards,

Marcelo


Marcelo Ferreira wrote:

Hi,

You can copy AccordionItem from webpatterns and create your own with the icon you want. You just need to make sure if the one on webpatterns change you also need to change yours.

Regards,

Marcelo



sorry Marc , i have never used the web pattern . Can you please tell me how to use it or any document you can provide me regarding its usage. please refer to my attachment, i am talking about the arrows which is in red-square. i want to place a image or any icon. 

Hi,

In attachment a possible solution. But I recommend you use arrows and put the other icon on title or something.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi,

In attachment a possible solution. But I recommend you use arrows and put the other icon on title or something.

Regards,

Marcelo

how you are able to make accordion as web block and use it as source?


Hi,

I open the WebPatterns espace. Outsystems will ask if you want to clone it since u cant change this espace. After cloning copy the web blocks you want to your espace. The problem of this is if Outsystems change WebPatterns you need to make the same changes yourself or copy the changed webblock to your espace again.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi,

In attachment a possible solution. But I recommend you use arrows and put the other icon on title or something.

Regards,

Marcelo


Thanks Marc, it is working fine :)

Lovish Goyal wrote:

Marcelo Ferreira wrote:

Hi,

In attachment a possible solution. But I recommend you use arrows and put the other icon on title or something.

Regards,

Marcelo


Thanks Marc, it is working fine :)


Hi marc,

i want , to expand one of the accordion item by deafult whenever we render to the page first time. How we can achieve this?

Hi,

For that you need to use some JS.

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"

Use this script on a expression with escape content set to No.

Check my example in attachment.

Solution

Marcelo Ferreira wrote:

Hi,

For that you need to use some JS.

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"

Use this script on a expression with escape content set to No.

Check my example in attachment.

not working.........

i have implemented


"<script>
$(function(){
    $("""+Region.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"
Solution

Hi,

Did you check my example? Do you get any error on the browser?

Regards,

Marcelo

Lovish Goyal wrote:

Marcelo Ferreira wrote:

Hi,

For that you need to use some JS.

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"

Use this script on a expression with escape content set to No.

Check my example in attachment.

not working.........

i have implemented


"<script>
$(function(){
    $("""+Region.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"

its working fine......... thanks marc


Lovish Goyal wrote:

Lovish Goyal wrote:

Marcelo Ferreira wrote:

Hi,

For that you need to use some JS.

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"

Use this script on a expression with escape content set to No.

Check my example in attachment.

not working.........

i have implemented


"<script>
$(function(){
    $("""+Region.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"

its working fine......... thanks marc


Marc, i have container , inside it one webblock is present and inside that one more web-block is present and i want to expand the last webblock,


Hi,

You should create a new post with a very new questions. That way the knowledge base of the community will be better organized. When you do it for this new question can you include a example or some picture for us to better understand your problem?

Regards,

Marcelo