72
Views
8
Comments
Solved
How do i do a drop down box for my icon badge?
Question

Hi Community,

I am looking to doing a dropdown for my notification. (Similar to the one on FB)

Any idea how I can do it? I am stuck at it for days...

Rank: #2343
Solution

Hi Alvin,

Please take a look at the sample developed by me using balloon widget.It gives the same look and feel. I have attached the OAP.


Try creating a new product and test it. Also you can use CSS overflow property on the list records displaying container to make it scrollable.


Regards,

Nikhil Purohit



IconBadgeDemo.oap

Rank: #1099

Alvin Teo wrote:

Hi Community,

I am looking to doing a dropdown for my notification. (Similar to the one on FB)

Any idea how I can do it? I am stuck at it for days...

Hi Alvin,


Have u tried these link

https://www.outsystems.com/forge/component-overview/2255/in-app-notifications-core

https://www.outsystems.com/forge/component-overview/2428/toggle-notification-content

https://www.outsystems.com/forge/component-overview/504/google-icon-notify-widget

Hope this help 

Rank: #353

Hi Alvin

In a Reactive app, the easiest way to achieve this would be to use the Popover Menu component:

You can then style it with css as required.

Alternatively you can use this custom web block which we recently built that looks very similar to the FB notification panel:

Component Web block

The notification panel is made visible using a boolean local variable - so an onClick action is required is required to toggle that variable (and an AJAX refresh on the IF Condition if you're building a traditional application). We encapsulated the panel container in an Animate component for a smoother animation (Only available in Reactive apps).

CSS

.notification-center{
    background: white;
    height: 100vh;
    padding: 20px;
    position: absolute;
    right: -71px;
    top: -21px;
    width: 300px;
    box-shadow: -9px 20px 20px rgba(0, 0, 0, .25), inset 0 0 2px 0px white;
}
  
.glass{
    background-color: rgba(255, 255, 255, .95);
    backdrop-filter: blur(5px);
}

Let us know how it goes :)

Rank: #90

Hi 

You can Icon Badge from OS web UI for traditional App

see below image


Hope this will help you.


Regards

Rahul

Rank: #353

Hi Alvin

Definitely. Implementation of the custom component should be very similar in traditional. The only differences would be:

1. The OnClick action must have an AJAX refresh to toggle the IF condition after changing the variable controlling it.

2. There is no Animate component in traditional so you would I either need to implement this with no animation or achieve the animation using CSS. 

Rank: #2343

Hi Alvin,

1. You can use Icon badge and on-hover or on-click of it you can show Balloon widget. 

2. Your list of action items should be in a web-block and tha web-block can be used in the content section of the Balloon widget. 

Here's a link for the widget for your reference : https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Content/Balloon


Hope this helps..!!


Regards,

Nikhil Purohit

Rank: #4530

Hi Community,

I am looking for this sort of dropbox.

Was told to define a hidden div with i0index = 1000, hen jquery to get data, then fill the div with content, set the div visible. 

Not sure how the above works, any help will be appreciated. 

Rank: #2343
Solution

Hi Alvin,

Please take a look at the sample developed by me using balloon widget.It gives the same look and feel. I have attached the OAP.


Try creating a new product and test it. Also you can use CSS overflow property on the list records displaying container to make it scrollable.


Regards,

Nikhil Purohit



IconBadgeDemo.oap