Search code examples
rallyappsdk2

Using images in Rally Apps


In the past I have incorporated some images that exist on the Rally server into my Apps-- for example I made a more generic "picker" menu that displays checkboxes, which of course rely on images for the checks and boxes.

Of course I would expect to have to check if any images I am using persist when the SDK version changes, but it never-the-less allows for some additional functionality and style you could not have without the images that exist on the server.

My question is: since there is no way to put our own images into Rally*, is there a way to find all the images possible that might be at our disposal on the server? I've used the "resources" tab in chrome and can find what is used by particular pages, but it is not complete, only what is used.

My specific need is that I'm trying to make a grid that shows metric, and I want a column that shows a green up/down arrow if the trend is good, and a red up/down arrow if the trend is bad.

*: Second answer below shows this is incorrect: you can put attachments into rally and then refer to them in apps


Solution

  • An easy way to incorporate icons is to use the icon classes:

    <span class="icon-NAME"></span>
    

    You could customize the colors by changing the font color in the CSS:

    <span class="icon-arrow-down" style="color:red"></span>
    

    Here are the available icons I've been able to find:

    icon-add
    icon-add-column
    icon-addTag
    icon-admin
    icon-archive
    icon-arrow-down
    icon-arrow-left
    icon-arrow-right
    icon-arrow-up
    icon-attachment
    icon-back
    icon-bars
    icon-bell
    icon-blocked
    icon-board
    icon-box
    icon-calendar
    icon-cancel
    icon-change-set
    icon-chat
    icon-chevron-down
    icon-chevron-left
    icon-chevron-right
    icon-chevron-up
    icon-children
    icon-circle
    icon-close
    icon-collapse
    icon-color
    icon-comment
    icon-cone
    icon-cross
    icon-dashboard
    icon-defect
    icon-defectSuite
    icon-delete
    icon-deploy
    icon-donut
    icon-dots
    icon-down
    icon-down_full
    icon-down_hollow
    icon-download
    icon-drag
    icon-dropdown
    icon-edit
    icon-embed
    icon-empty
    icon-enlarge
    icon-expand
    icon-export
    icon-favorite
    icon-feedback
    icon-file
    icon-filter
    icon-fiveDots
    icon-flag
    icon-folder
    icon-full-arrow-down
    icon-full-arrow-left
    icon-full-arrow-right
    icon-full-arrow-up
    icon-gear
    icon-graph
    icon-grid
    icon-help
    icon-hierarchy
    icon-history
    icon-home
    icon-hourglass
    icon-idea
    icon-images
    icon-infinity
    icon-info
    icon-info-circle
    icon-leaf
    icon-leave
    icon-left
    icon-line
    icon-link
    icon-lock
    icon-lock-open
    icon-mail
    icon-minus
    icon-more
    icon-next
    icon-none
    icon-not-favorite
    icon-ok
    icon-partial
    icon-pie
    icon-plus
    icon-popup
    icon-portfolio
    icon-post
    icon-predecessor
    icon-previous
    icon-print
    icon-program
    icon-progress
    icon-question
    icon-ready
    icon-recycle
    icon-refresh
    icon-reply-all
    icon-right
    icon-right_full
    icon-right_hollow
    icon-rss
    icon-save
    icon-scope-down
    icon-scope-up
    icon-scope-up-down
    icon-search
    icon-setup
    icon-share
    icon-shrink
    icon-small-chevron-down
    icon-small-chevron-left
    icon-small-chevron-right
    icon-small-chevron-up
    icon-snapshot
    icon-split
    icon-square
    icon-story
    icon-successor
    icon-tag
    icon-task
    icon-test
    icon-test-run
    icon-testCase
    icon-testSet
    icon-threeDots
    icon-thumbs-down
    icon-thumbs-up
    icon-to-do
    icon-triangle
    icon-up
    icon-upload
    icon-user
    icon-user-add
    icon-users
    icon-visible
    icon-warning
    icon-workspace