Present Creation basics
In this section, we will cover some of the basics of creating a presentation.
Dual modes
Within the Present editor, there are two types of modes used to design and create a presentation and its content. These are:
- Visual Mode: Shows a visual representation of the presentation. Allows users to drag, drop and configure objects while this mode is enabled.
- Code Mode: Swap between visual and code modes with the bilateral editor and edit presentation code with HTML, Javascript and CSS. Authorized developers can extend presentation functionality within Yellowfin and create rich application experiences. Learn more here.
Both the editor modes work seamlessly together, so changes made on one mode will immediately be reflected on the other one. This allows users to use them interchangeably and build a presentation suitable for any purpose. These two types of modes help users of varying capabilities to come up with their ultimate presentation design.
Developer centric presentation editing
Developers can create rich application experiences, by extending functionality with Code Mode, Code Widgets, and Actions Buttons. Only authorized developers will be able to edit presentation code using HTML, Javascript, and CSS.
Refer to any of our wiki sections for more information on these:
- Code Mode
- Code Widgets
- Action Buttons
Understanding the Yellowfin Present builder
This section provides an understanding of the Present builder, and its main features.
Number | Feature | Description |
|---|---|---|
1 | Slide | This is the content slide where content is added for the presentation. Each slide has a flexible layout, that allows you to drop and position objects anywhere. Learn more about managing presentation slides here. |
2 | Navigation arrows | Arrows on either side of the slide that allows you to move back and forth between them. |
3 | Top navigation arrows | Arrows on top of the slides that allows you to move back and forth between them. |
4 | Copy slide | Creates a copy of the current slide next to it. Any styling or content applied on the slide, will also be copied. |
5 | Delete slide | Deletes the current slide. |
6 | Slide number | Displays the number of the presentation slide. |
7 | Slide name | Shows the name of the slide. |
8 | Left side navigation filters | This button brings out a panel to apply filters. The panel shows all filters added to the presentation, and serves as an alternate style of displaying filters. Learn more. |
9 | Sub tabs | Manage slides contained in this presentation. You can view a list of slides, reorder them, open another slide, or create a new one. Learn more. |
10 | Report Widgets | Search for and add existing reports to the presentation. If the report has snapshots and bookmarks, you can add those too. |
11 | Filter Widgets | Drag filter widgets from this panel, to add filters anywhere on the presentation. Learn more. |
12 | Text Widgets | Drag in a Text Widget onto the presentation. Learn more. |
13 | Graphic Widgets | The Graphics panels allows you to include graphical elements, such as shapes, icons, and lines to your presentation. Learn more. |
14 | Image Widgets | Allows you to add a pre-existing image or a new one through the Image manager. Learn more. |
| 15 | Code Widgets | Used to add Code Widgets or Action buttons to your presentation. This panel contains multiple out-of-the-box code widgets and action buttons, along with any custom ones added by the users. |
16 | Blueprint | Allows users to wireframe a presentation design, and upon further configuration, create Quick Charts directly on the presentation. Learn more. |
17 | Presentation name | Displays the name of the presentation. This can be edited by double-clicking on it, or via the Present properties panel. |
18 | Visual Mode button | When editing a presentation, click on this button to view and edit the presentation visually. (As shown in the above example.) |
19 | Code Mode button | Click on this button to view and edit the presentation’s code. Learn more. |
| 20 | Undo, Redo | Allows you to undo or redo the last few changes done on the canvas. |
| 21 | Preview button | Jump into preview mode to preview and test the dashboard in its working form, without publishing it. |
| 22 | More button | This button lets you perform other actions on the presentation. These include:
|
23 | Publish button | Use this to publish the presentation, making it accessible to other users. |
24 | Properties panel | This panel displays configuration properties for the presentation or any selected object. You can use this to configure and customize the selected Present object, including changing color, font, background, positioning, size and other details. Note that this panel can be easily moved, hidden and expanded again. |
25 | Activity Stream | Allows users to collaborate with others on the presentation. Learn more. |
| 26 | Exit button | Exits the presentation builder. When existing, the following options will appear.
|