/

If you want to display current campaigns, product showcases, or featured content in a dynamic, rotating format within your app, the most effective solution is to use the Carousel element. This element allows you to make the most efficient use of page space by displaying multiple images and text elements as sequential slides.

To create a stylish campaign area, first create the table on the screen. Then, from the Data Sources section, follow the Actions > New SQL Action steps to write an action named InsertHolidayCarousel that will retrieve sample data, and prefix the table name with “dbo.” Test and save it. Repeat the same steps for the GetCarouselDetail action—which retrieves and filters the data—and the GetHolidayCarousel action, which retrieves all the data. Bind the Initial Action query to the screen. Next, drag the Carousel element onto the screen and define this action in the Data Source field of the Properties panel. Select yellow from the Hover Background Color field. Enable the AutoPlay field for automatic playback. Set the AutoplaySpeed field to 3000, and enable the ShowPageIndicator field. Place a Vertical Stack element inside the Carousel element, and center it vertically using the Layout field in the Styling panel. Add an Image element inside it. Define it as ImageUrl in the Value field. In the Layout section of the Styling panel, set the Width and Height fields to 400 px. Add a Label below the Image and select “Title.” In the Style section of the Styling panel, set the font to Heading 2. Change the color using the Color section in the Text field below. Duplicate the Label element. In the Style section of the Styling panel, set the font to Heading 4. In the Value field under Properties, set it to “Description.”

Create a new page named “Carousel Detail.” Add a “New Screen Input.” Enter “CarouselId” in the “Input Name” field and select “Guid” as the “Type.” Link the “GetCarouselDetail” action to the page as the “Initial Action.” Configure the resulting field as shown on the screen. Drag a “Panel” element onto the screen. In the “Styling” section, set the ‘Width’ and “Height” to 500 px. In the Fill section of the Style panel, select the “White Background” option. Drag a Vertical Stack into it and center it both vertically and horizontally. Set the top Padding value to 10. Inside it, add an Image element and resize it using the Layout section of the Styling panel; enter 50 px in the Radius field under Border. Add a Label element below the Image element. In the “Value” section, define the elements by following the steps: “Action Result,” “GetCarouselDetail,” “First,” and “Title.” In the “Styling” section, adjust the alignment and select the “Heading 4” font. Add another “Label” element below it. Define it by following the steps: “Action Result,” “GetCarouselDetail,” “First,” and “Description.” Add one more ‘Label’ element and follow the same steps to select “Detail.” Return to the page you created at the beginning. Click the Image element and follow the onClick, Navigation, and Navigate steps. Enter the CarouselDetail page in the To Screen field. In the dropdown field below, link it to Current, Id. Change the values in the Width and Height dropdown fields below to match those on the screen.

When the application is tested, the campaign card presented within the Carousel structure is displayed. The top section of the card features the campaign image, while the campaign title and short description are neatly positioned below it. When the user clicks on the image on the card, a pop-up screen opens displaying the details of the selected campaign. On this screen, the campaign image, title, and description are presented in a larger area, allowing the content to be viewed in greater detail and with improved readability.