Sample Cards (Cards Bump)

Sample Cards & It's Types 

                             (Created cards and different types of ways using cards on a application)

• Color Coded cards : 

                                   Using a table "EBA_DEMO_CARD_EMP"  created a cards with different colour based on there department number the colours will be changed 

                                                    case when deptno = 10 then 'u-color-2' 

                                                                             when deptno = 20 then 'u-color-3'

                                                                             when deptno = 30 then 'u-color-4'

                                                                             when deptno = 40 then 'u-color-5'

                                                                     end card_color 

This is the case used for the first cards to get a color based on there deptno, and that will be reflected to the end cards on the application. The image as been added below,

So, This is the color coded cards and I have styled it with 2 forms one with cards and other is icons,

• Icons are nothing but giving the cards a heading with our own column names are whatever name or icon we needed on that state of time.
• Were it hold the main place of the card and will be in the top, centre, background as we mention it to be.
• Now, I have given name as icon so that names will be added on the icon region in a shorter way, will provide you the output how it came to know the visual representation of the icons on my application.

• Faceted Search with Cards :

                               You can combine Cards region with a Faceted Search. This provides an easy-to-use interface for narrowing down the results and quickly locating specific data.

Now, I will provide you a video of how faceted search works and what will be the uses, rather than reading all the long - long paragraph the video will be more clear, to let you all know what's the main process of using this with cards.

So Yeah, after watching the video there must be a clear view and thoughts of who this works and what are its key function, on adding this with cards

• We have a search bar on the left panel, were we have the option to filter our content and particular options alone as our needed.
• And based on the filter conditions we give it should be matched and aligned with the cards table or some other thing, like what all are the options there on the search panel that should be matched to the cards provided on that, So that's how it works.

Now, lets move into the last and final type

• Star Icons :

                       With CSS Styling, you can change the default shape of the icon initials.

This page contains star-shape CSS Class defined as page inline CSS Classes. Icon CSS Classes calls this calss to render star shaped icons.

It's just same as icons as I already mentioned earlier on the 1st type, were we are noe just adding star as a icon and giving content inside that star, like the star with be the icon image and that particular image has colour and value with will be assigned by us.

This is the output of the star icon cards on the application, were it holds all the possibilities of what i have shared with you on the above content.

Summary of the Content

• This blog demonstrates the implementation of Sample Cards in Oracle APEX using Application No: 2029, showcasing multiple ways to design, style, and enhance cards for better data visualization and user experience.

• The first approach focuses on Color-Coded Cards, where card colors dynamically change based on department numbers using the EBA_DEMO_CARD_EMP table. By applying conditional logic through a CASE statement, each department is visually distinguished with unique color classes, making the data more intuitive and visually appealing.

• Next, the application introduces Styled Cards with Icons, where icons act as concise headers or visual identifiers for each card. These icons are centrally positioned and styled to represent key information clearly, improving readability while maintaining a clean layout.

• The blog then explores Faceted Search with Cards, which enhances usability by allowing users to filter and refine card data using a search panel. This feature enables quick data discovery by dynamically aligning filter selections with the card results, providing a seamless and interactive browsing experience.

• Finally, Star Icon Cards are presented using custom CSS styling. By modifying default icon shapes into star-shaped designs, these cards offer a creative visual variation while still retaining all core functionalities such as color coding, values, and content display.

Overall, this application highlights how Oracle APEX Cards can be effectively customized using conditional logic, CSS styling, icons, and faceted search to build modern, interactive, and user-friendly interfaces.