How to add a logo to an app in Jitterbit App Builder

The following document will step you through the basics of adding a logo to an app. This assumes you have an existing logo file available to work with.

Upload the logo to a collection

1. Navigate to the application Look & Feel
2. Select the Collection associated with your app to add the logo file to. For example: Test Collection
3. Click the Images tab
4. Click the +Image button
5. Click Browse and locate the logo file image
6. Select the image file and click Open
7. Assign an Image Name. For example: Jitterbit Logo
8. Click Save

Locate the logo image UUID

1. Navigate to the application Look & Feel
2. Select the Collection where you uploaded the logo
3. Click the Images tab
4. Locate the logo image record
5. Click the Open Record icon
6. Select the part of the Relative URL value that appears following /image/. For example: 50e85d87-e283-4953-983f-0bc3e18b3a7e
7. Copy the value to your clipboard (this is the logo image UUID)

Store the logo UUID on a table

1. Navigate to the App Workbench
2. Locate the table you want to add a column to, to store the Logo ID. For example: Parameter
3. Click Open Record for the table
4. Click +Column
5. Assign a Name for the column. For example: Logo
6. Set the Logical Data Type to Unique ID
7. Confirm Physical Data Type is UUID
8. Click Save
9. Click the x to exit the screen
10. Click the Results button
11. Click the pencil edit icon
12. Paste the Logo image UUID value into the appropriate field. For example: Logo
13. Click Proceed
14. Confirm you have a Rule that contains the Logo UUID. For example: Parameter (Source)

Associate the site menu with a rule containing logo

1. Navigate to the App Workbench
2. Click Menu
3. Click Open Record for the main Application Menu
4. Click Edit
5. Select the Source Rule value containing the Logo column. For example: Parameter (Source)
6. Click Save
7. Click the x to exit the screen
8. Click + Menu Item from the Menu Items panel
9. Select Image as the Data Control Types value
10. Assign a Name. For example: Jitterbit
11. From Source Features, set Source Column to map to the column containing the Logo UUID. For example: Logo
12. Click Save
13. Click the x to exit the screen
14. Set the Alignment to Left
15. Navigate back to the application view and refresh the browser
16. Confirm you now see the logo image

Example theme updates to hide page title and back button

At this point you may wish to make some additional adjustments using Themes. You may choose to hide the native application back button and page title, for example. This type of change should be carefully considered as changes to navigation can impact the usability of an application.

1. Navigate to the application Look & Feel
2. Select the Collection your app is associated with
3. With Standard selected as Theme Type, click +Theme
4. Assign a Theme Name. For example: Custom Navigation
5. Click Save
6. Select Page – Title Bar from the Components panel
7. Click + Style from the Styles panel
8. Set the Area to Page Title
9. Set the Style Type to Display
10. Set the 1 – Display Value to none
11. Click Save
12. Navigate back to application view, refresh browser and confirm update
13. Return to Theme design, click Create from the Styles panel
14. Set the Area to Back Button
15. Set the Style Type to Display
16. Set the 1 – Display Value to none
17. Click Save
18. Click the x to exit out of the screen
19. Navigate back to the application view, refresh and confirm update