Skip to content

Sticky

A sticky is a persistent window which can be configured to remain top-most as long as it’s shown. The user is able to interact with the items shown in the sticky e.g. clicking on links, opening pdf previews etc. Keyboard interaction is also supported, use:

KeyAction
<down-arrow>Focus next (down) item
<up-arrow>Focus last (up) item
.or -Toggle collapsed state of item
<space>Run primary action (depends on the type of the item)
<enter>Run secondary action
<esc>Close sticky (or exit from search if search field is focused)
any charOpen search field

Open

Open a new sticky window with the given name and opts. The function can be called multiple times with the same name argument in order to update an already showing sticky.

Parameters

  • name the name of the window to open, only one sticky-window can have this name
  • opts is an object containing the configuration for the sticky, it may have the following properties:
    • embed (boolean, default false) should the sticky be embedded in the window of its owner application? When embed is set to true some of the below options are not relevant
    • resizable (boolean, default true) should it be possible to resize the sticky window
    • movable (boolean, default true) should it be possible to move the sticky window
    • searchable (boolean, default true) should the contents of the sticky be searchable
    • showFooter (boolean, default true) should a foother with a nice logo be shown
    • chrome (boolean, default true) – if false then no titlebar or borders will be shown for the sticky. Previously this could only be done by movable: false, resizable: false configuration
    • fontSize (int, default 12) the base font size to use for items in the sticky
    • focusOnUpdate (boolean, default false) when the sticky is updated should we focus the sticky window again?
    • topMost (boolean, default false) should the sticky be top-most always
    • title the title of the sticky window
    • alternatingRowColors (bool, default false) can be used to display an alternating row background color
    • iconColor (string) sets the color of the icon for the window title, options are:
      • “Default” is whitish (and the default value)
      • “Dark” is not black, but dark
      • “Neutral” is a wintry, stormy gray
      • “Blue” is corporate blue
    • foregroundColor to set the text color (see Sticky ACTION for list of colors
    • backgroundColor to set the sticky background color
    • keyboardNavigation a boolean (default true) as to whether you can use the keyboard to navigate
    • toolWindow (boolean, default false) option will display the window as a toolwindow which is with a smaller titlebar w/o an icon and only a close button and a thinner window border (on most versions of Windows)
    • fit (string) option has been added to allow for some customization of the spacing between built-in sticky items. The following values (strings) are supported:
      • “Snug” no padding
      • “Tight” for items being quite close
      • “Default” for a bit a spacing
      • “Relaxed” for more spacing on all sides
      • “VeryRelaxed” for quite a bit more spacing
      • “SupremelyChilled” for agoraphobic items
      • a Number e.g. 10 or 5.5 for specific padding on all sides
      • an object with top and/or bottom properties e.g. { top: 10, bottom: 20 }
    • location determining where the sticky should be shown, contains:
      • type which type of position - currently only ‘absolute’ is allowed
      • top px from the top of the screen
      • left px from the left side of the screen
      • width px width of sticky
      • height px wheight of sticky
    • items a list of sticky items to show in the window, each is defined by:
      • type which type of item - see below
      • more depending on the type, see below

We support the following types of items:

See the details for each below. An example of a Sticky configuration is:

javascript
Sticky.open(
  'mySticky', 
  { 
    embed: true,
    location: {
      type: 'absolute',
      top: 100,
      left: 100
    },
    items: [
      { 
        type: 'GIF',
        source: 'http://gifs.com/cat' 
      },
      { 
        type: 'ACTION', 
        name: 'SomeOtherAction',
        header: 'Some other action',
        body: 'Click to run'
      }, 
      {
        type: 'PDF',
        source: 'http://pdfworld.com/arandompdf.pdf',
        link: 'http://pdfworld.com/aboutarandompdf',
        height: 100,
        collapsible: true,
        collapsed: false,
        saveable: false,
        focus: true
      },
      {
        type: 'HTML',
        source: '<h1>Big header</h1><h2>Smaller header</h2>',
        height: 50
      },
      {
        type: 'LINK',
        link: 'http://sirenia.eu',
        prefix: 'Go to ', text: 'Sirenia', suffix: ' now'
      }
    ]
  }
);

Appearance

The Sticky window appearance can be controlled to a great degree. Here are a few examples of how it might look with a few simple items.

ConfigurationAppearance
Single LINK item, movable: true.Movable Sticky window
With movable: false but still resizable.Non-movable Sticky
With movable: false, resizable: false.Non-movable and non-resizable
Same but no footer movable: false, resizable: false, showFooter: false.No-footer
No chrome (Window borders) movable: true, closable: true, chrome: false.No-chrome
Two LINK items. alternatingRowColors: true.Alternating row colors
Two LINK items. alternatingRowColors: false.Non-alternating row colors
First item with backgroundColor: "Red", foregroundColor: "White".Custom background color
ACTION item with icon: "BombSolid", iconColor: "Green".ACTION item with icon

GIF

The first is GIF which simply shows an (animated) gif - it may have the following properties:

  • source an url for a gif, can be remote or local

ACTION

An ACTION will run the flow with the name given when the sticky is clicked. For the ACTION type the following are valid.

  • name the name of the action to launch - this should be unique – or –
  • flow can be used as an alternative to name – it will match on both identifier, name and subject
  • header and body if set these will be shown instead of action name on sticky
  • height the height of the item in pixels
  • inputs is an object containing the named inputs for the action
  • focus whether or not the item should have focus (only the first item with this property set to true will be focused)
  • icon is an optional icon to display
  • ìconColor is a color (string) for the icon (see table below)
Icons for the ACTION type sticky item
IconName
_500pxBrands
AccessibleIconBrands
AccusoftBrands
AcquisitionsIncorporatedBrands
AddressBookRegular
AddressBookSolid
AddressCardRegular
AddressCardSolid
AdjustSolid
AdnBrands
AdSolid
AdversalBrands
AffiliatethemeBrands
AirbnbBrands
AirFreshenerSolid
AlgoliaBrands
AlignCenterSolid
AlignJustifySolid
AlignLeftSolid
AlignRightSolid
AlipayBrands
AllergiesSolid
AmazonBrands
AmazonPayBrands
AmbulanceSolid
AmericanSignLanguageInterpretingSolid
AmiliaBrands
AnchorSolid
AndroidBrands
AngellistBrands
AngleDoubleDownSolid
AngleDoubleLeftSolid
AngleDoubleRightSolid
AngleDoubleUpSolid
AngleDownSolid
AngleLeftSolid
AngleRightSolid
AngleUpSolid
AngrycreativeBrands
AngryRegular
AngrySolid
AngularBrands
AnkhSolid
ApperBrands
AppleAltSolid
AppleBrands
ApplePayBrands
AppStoreBrands
AppStoreIosBrands
ArchiveSolid
ArchwaySolid
ArrowAltCircleDownRegular
ArrowAltCircleDownSolid
ArrowAltCircleLeftRegular
ArrowAltCircleLeftSolid
ArrowAltCircleRightRegular
ArrowAltCircleRightSolid
ArrowAltCircleUpRegular
ArrowAltCircleUpSolid
ArrowCircleDownSolid
ArrowCircleLeftSolid
ArrowCircleRightSolid
ArrowCircleUpSolid
ArrowDownSolid
ArrowLeftSolid
ArrowRightSolid
ArrowsAltHSolid
ArrowsAltSolid
ArrowsAltVSolid
ArrowUpSolid
ArtstationBrands
AssistiveListeningSystemsSolid
AsteriskSolid
AsymmetrikBrands
AtlassianBrands
AtlasSolid
AtomSolid
AtSolid
AudibleBrands
AudioDescriptionSolid
AutoprefixerBrands
AvianexBrands
AviatoBrands
AwardSolid
AwsBrands
BabyCarriageSolid
BabySolid
BackspaceSolid
BackwardSolid
BaconSolid
BahaiSolid
BalanceScaleLeftSolid
BalanceScaleRightSolid
BalanceScaleSolid
BandAidSolid
BandcampBrands
BanSolid
BarcodeSolid
BarsSolid
BaseballBallSolid
BasketballBallSolid
BathSolid
BatteryEmptySolid
BatteryFullSolid
BatteryHalfSolid
BatteryQuarterSolid
BatteryThreeQuartersSolid
BattleNetBrands
BedSolid
BeerSolid
BehanceBrands
BehanceSquareBrands
BellRegular
BellSlashRegular
BellSlashSolid
BellSolid
BezierCurveSolid
BibleSolid
BicycleSolid
BikingSolid
BimobjectBrands
BinocularsSolid
BiohazardSolid
BirthdayCakeSolid
BitbucketBrands
BitcoinBrands
BityBrands
BlackberryBrands
BlackTieBrands
BlenderPhoneSolid
BlenderSolid
BlindSolid
BloggerBBrands
BloggerBrands
BlogSolid
BluetoothBBrands
BluetoothBrands
BoldSolid
BoltSolid
BombSolid
BoneSolid
BongSolid
BookDeadSolid
BookmarkRegular
BookmarkSolid
BookMedicalSolid
BookOpenSolid
BookReaderSolid
BookSolid
BootstrapBrands
BorderAllSolid
BorderNoneSolid
BorderStyleSolid
BowlingBallSolid
BoxesSolid
BoxOpenSolid
BoxSolid
BoxTissueSolid
BrailleSolid
BrainSolid
BreadSliceSolid
BriefcaseMedicalSolid
BriefcaseSolid
BroadcastTowerSolid
BroomSolid
BrushSolid
BtcBrands
BufferBrands
BugSolid
BuildingRegular
BuildingSolid
BullhornSolid
BullseyeSolid
BurnSolid
BuromobelexperteBrands
BusAltSolid
BusinessTimeSolid
BusSolid
BuyNLargeBrands
BuyselladsBrands
CalculatorSolid
CalendarAltRegular
CalendarAltSolid
CalendarDaySolid
CalendarMinusRegular
CalendarMinusSolid
CalendarPlusRegular
CalendarPlusSolid
CalendarRegular
CalendarSolid
CalendarTimesRegular
CalendarTimesSolid
CalendarWeekSolid
CameraRetroSolid
CameraSolid
CampgroundSolid
CanadianMapleLeafBrands
CandyCaneSolid
CannabisSolid
CapsulesSolid
CarAltSolid
CaravanSolid
CarBatterySolid
CarCrashSolid
CaretDownSolid
CaretLeftSolid
CaretRightSolid
CaretSquareDownRegular
CaretSquareDownSolid
CaretSquareLeftRegular
CaretSquareLeftSolid
CaretSquareRightRegular
CaretSquareRightSolid
CaretSquareUpRegular
CaretSquareUpSolid
CaretUpSolid
CarrotSolid
CarSideSolid
CarSolid
CartArrowDownSolid
CartPlusSolid
CashRegisterSolid
CatSolid
CcAmazonPayBrands
CcAmexBrands
CcApplePayBrands
CcDinersClubBrands
CcDiscoverBrands
CcJcbBrands
CcMastercardBrands
CcPaypalBrands
CcStripeBrands
CcVisaBrands
CentercodeBrands
CentosBrands
CertificateSolid
ChairSolid
ChalkboardSolid
ChalkboardTeacherSolid
ChargingStationSolid
ChartAreaSolid
ChartBarRegular
ChartBarSolid
ChartLineSolid
ChartPieSolid
CheckCircleRegular
CheckCircleSolid
CheckDoubleSolid
CheckSolid
CheckSquareRegular
CheckSquareSolid
CheeseSolid
ChessBishopSolid
ChessBoardSolid
ChessKingSolid
ChessKnightSolid
ChessPawnSolid
ChessQueenSolid
ChessRookSolid
ChessSolid
ChevronCircleDownSolid
ChevronCircleLeftSolid
ChevronCircleRightSolid
ChevronCircleUpSolid
ChevronDownSolid
ChevronLeftSolid
ChevronRightSolid
ChevronUpSolid
ChildSolid
ChromeBrands
ChromecastBrands
ChurchSolid
CircleNotchSolid
CircleRegular
CircleSolid
CitySolid
ClinicMedicalSolid
ClipboardCheckSolid
ClipboardListSolid
ClipboardRegular
ClipboardSolid
ClockRegular
ClockSolid
CloneRegular
CloneSolid
ClosedCaptioningRegular
ClosedCaptioningSolid
CloudDownloadAltSolid
CloudMeatballSolid
CloudMoonRainSolid
CloudMoonSolid
CloudRainSolid
CloudscaleBrands
CloudShowersHeavySolid
CloudsmithBrands
CloudSolid
CloudSunRainSolid
CloudSunSolid
CloudUploadAltSolid
CloudversifyBrands
CocktailSolid
CodeBranchSolid
CodepenBrands
CodeSolid
CodiepieBrands
CoffeeSolid
CogSolid
CogsSolid
CoinsSolid
ColumnsSolid
CommentAltRegular
CommentAltSolid
CommentDotsRegular
CommentDotsSolid
CommentRegular
CommentSolid
CommentsRegular
CommentsSolid
CompactDiscSolid
CompassRegular
CompassSolid
CompressAltSolid
CompressArrowsAltSolid
CompressSolid
ConciergeBellSolid
ConfluenceBrands
ConnectdevelopBrands
ContaoBrands
CookieBiteSolid
CookieSolid
CopyRegular
CopyrightRegular
CopyrightSolid
CopySolid
CottonBureauBrands
CouchSolid
CpanelBrands
CreativeCommonsBrands
CreativeCommonsByBrands
CreativeCommonsNcBrands
CreativeCommonsNcEuBrands
CreativeCommonsNcJpBrands
CreativeCommonsNdBrands
CreativeCommonsPdAltBrands
CreativeCommonsPdBrands
CreativeCommonsRemixBrands
CreativeCommonsSaBrands
CreativeCommonsSamplingBrands
CreativeCommonsSamplingPlusBrands
CreativeCommonsShareBrands
CreativeCommonsZeroBrands
CreditCardRegular
CreditCardSolid
CriticalRoleBrands
CropAltSolid
CropSolid
CrosshairsSolid
CrossSolid
CrownSolid
CrowSolid
CrutchSolid
Css3AltBrands
Css3Brands
CubeSolid
CubesSolid
CutSolid
CuttlefishBrands
DailymotionBrands
DAndDBeyondBrands
DAndDBrands
DashcubeBrands
DatabaseSolid
DeafSolid
DeliciousBrands
DemocratSolid
DeploydogBrands
DeskproBrands
DesktopSolid
DevBrands
DeviantartBrands
DharmachakraSolid
DhlBrands
DiagnosesSolid
DiasporaBrands
DiceD20Solid
DiceD6Solid
DiceFiveSolid
DiceFourSolid
DiceOneSolid
DiceSixSolid
DiceSolid
DiceThreeSolid
DiceTwoSolid
DiggBrands
DigitalOceanBrands
DigitalTachographSolid
DirectionsSolid
DiscordBrands
DiscourseBrands
DiseaseSolid
DivideSolid
DizzyRegular
DizzySolid
DnaSolid
DochubBrands
DockerBrands
DogSolid
DollarSignSolid
DollyFlatbedSolid
DollySolid
DonateSolid
DoorClosedSolid
DoorOpenSolid
DotCircleRegular
DotCircleSolid
DoveSolid
DownloadSolid
Draft2digitalBrands
DraftingCompassSolid
DragonSolid
DrawPolygonSolid
DribbbleBrands
DribbbleSquareBrands
DropboxBrands
DrumSolid
DrumSteelpanSolid
DrumstickBiteSolid
DrupalBrands
DumbbellSolid
DumpsterFireSolid
DumpsterSolid
DungeonSolid
DyalogBrands
EarlybirdsBrands
EbayBrands
EdgeBrands
EditRegular
EditSolid
EggSolid
EjectSolid
ElementorBrands
EllipsisHSolid
EllipsisVSolid
ElloBrands
EmberBrands
EmpireBrands
EnvelopeOpenRegular
EnvelopeOpenSolid
EnvelopeOpenTextSolid
EnvelopeRegular
EnvelopeSolid
EnvelopeSquareSolid
EnviraBrands
EqualsSolid
EraserSolid
ErlangBrands
EthereumBrands
EthernetSolid
EtsyBrands
EuroSignSolid
EvernoteBrands
ExchangeAltSolid
ExclamationCircleSolid
ExclamationSolid
ExclamationTriangleSolid
ExpandAltSolid
ExpandArrowsAltSolid
ExpandSolid
ExpeditedsslBrands
ExternalLinkAltSolid
ExternalLinkSquareAltSolid
EyeDropperSolid
EyeRegular
EyeSlashRegular
EyeSlashSolid
EyeSolid
FacebookBrands
FacebookFBrands
FacebookMessengerBrands
FacebookSquareBrands
FanSolid
FantasyFlightGamesBrands
FastBackwardSolid
FastForwardSolid
FaucetSolid
FaxSolid
FeatherAltSolid
FeatherSolid
FedexBrands
FedoraBrands
FemaleSolid
FighterJetSolid
FigmaBrands
FileAltRegular
FileAltSolid
FileArchiveRegular
FileArchiveSolid
FileAudioRegular
FileAudioSolid
FileCodeRegular
FileCodeSolid
FileContractSolid
FileCsvSolid
FileDownloadSolid
FileExcelRegular
FileExcelSolid
FileExportSolid
FileImageRegular
FileImageSolid
FileImportSolid
FileInvoiceDollarSolid
FileInvoiceSolid
FileMedicalAltSolid
FileMedicalSolid
FilePdfRegular
FilePdfSolid
FilePowerpointRegular
FilePowerpointSolid
FilePrescriptionSolid
FileRegular
FileSignatureSolid
FileSolid
FileUploadSolid
FileVideoRegular
FileVideoSolid
FileWordRegular
FileWordSolid
FillDripSolid
FillSolid
FilmSolid
FilterSolid
FingerprintSolid
FireAltSolid
FireExtinguisherSolid
FirefoxBrands
FirefoxBrowserBrands
FireSolid
FirstAidSolid
FirstdraftBrands
FirstOrderAltBrands
FirstOrderBrands
FishSolid
FistRaisedSolid
FlagCheckeredSolid
FlagRegular
FlagSolid
FlagUsaSolid
FlaskSolid
FlickrBrands
FlipboardBrands
FlushedRegular
FlushedSolid
FlyBrands
FolderMinusSolid
FolderOpenRegular
FolderOpenSolid
FolderPlusSolid
FolderRegular
FolderSolid
FontAwesomeAltBrands
FontAwesomeBrands
FontAwesomeFlagBrands
FontAwesomeLogoFullBrands
FontAwesomeLogoFullRegular
FontAwesomeLogoFullSolid
FonticonsBrands
FonticonsFiBrands
FontSolid
FootballBallSolid
FortAwesomeAltBrands
FortAwesomeBrands
ForumbeeBrands
ForwardSolid
FoursquareBrands
FreebsdBrands
FreeCodeCampBrands
FrogSolid
FrownOpenRegular
FrownOpenSolid
FrownRegular
FrownSolid
FulcrumBrands
FunnelDollarSolid
FutbolRegular
FutbolSolid
GalacticRepublicBrands
GalacticSenateBrands
GamepadSolid
GasPumpSolid
GavelSolid
GemRegular
GemSolid
GenderlessSolid
GetPocketBrands
GgBrands
GgCircleBrands
GhostSolid
GiftSolid
GiftsSolid
GitAltBrands
GitBrands
GithubAltBrands
GithubBrands
GithubSquareBrands
GitkrakenBrands
GitlabBrands
GitSquareBrands
GitterBrands
GlassCheersSolid
GlassesSolid
GlassMartiniAltSolid
GlassMartiniSolid
GlassWhiskeySolid
GlideBrands
GlideGBrands
GolfBallSolid
GoodreadsBrands
GoodreadsGBrands
GoogleBrands
GoogleDriveBrands
GooglePlayBrands
GooglePlusBrands
GooglePlusGBrands
GooglePlusSquareBrands
GoogleWalletBrands
GopuramSolid
GraduationCapSolid
GratipayBrands
GravBrands
GreaterThanEqualSolid
GreaterThanSolid
GrimaceRegular
GrimaceSolid
GrinAltRegular
GrinAltSolid
GrinBeamRegular
GrinBeamSolid
GrinBeamSweatRegular
GrinBeamSweatSolid
GrinHeartsRegular
GrinHeartsSolid
GrinRegular
GrinSolid
GrinSquintRegular
GrinSquintSolid
GrinSquintTearsRegular
GrinSquintTearsSolid
GrinStarsRegular
GrinStarsSolid
GrinTearsRegular
GrinTearsSolid
GrinTongueRegular
GrinTongueSolid
GrinTongueSquintRegular
GrinTongueSquintSolid
GrinTongueWinkRegular
GrinTongueWinkSolid
GrinWinkRegular
GrinWinkSolid
GripfireBrands
GripHorizontalSolid
GripLinesSolid
GripLinesVerticalSolid
GripVerticalSolid
GruntBrands
GuitarSolid
GulpBrands
HackerNewsBrands
HackerNewsSquareBrands
HackerrankBrands
HamburgerSolid
HammerSolid
HamsaSolid
HandHoldingHeartSolid
HandHoldingMedicalSolid
HandHoldingSolid
HandHoldingUsdSolid
HandHoldingWaterSolid
HandLizardRegular
HandLizardSolid
HandMiddleFingerSolid
HandPaperRegular
HandPaperSolid
HandPeaceRegular
HandPeaceSolid
HandPointDownRegular
HandPointDownSolid
HandPointerRegular
HandPointerSolid
HandPointLeftRegular
HandPointLeftSolid
HandPointRightRegular
HandPointRightSolid
HandPointUpRegular
HandPointUpSolid
HandRockRegular
HandRockSolid
HandScissorsRegular
HandScissorsSolid
HandshakeAltSlashSolid
HandshakeRegular
HandshakeSlashSolid
HandshakeSolid
HandsHelpingSolid
HandSparklesSolid
HandSpockRegular
HandSpockSolid
HandsSolid
HandsWashSolid
HanukiahSolid
HardHatSolid
HashtagSolid
HatCowboySideSolid
HatCowboySolid
HddRegular
HddSolid
HeadingSolid
HeadphonesAltSolid
HeadphonesSolid
HeadsetSolid
HeadSideCoughSlashSolid
HeadSideCoughSolid
HeadSideMaskSolid
HeadSideVirusSolid
HeartbeatSolid
HeartBrokenSolid
HeartRegular
HeartSolid
HelicopterSolid
HighlighterSolid
HikingSolid
HippoSolid
HipsBrands
HireAHelperBrands
HistorySolid
HockeyPuckSolid
HollyBerrySolid
HomeSolid
HooliBrands
HornbillBrands
HorseHeadSolid
HorseSolid
HospitalAltSolid
HospitalRegular
HospitalSolid
HospitalSymbolSolid
HospitalUserSolid
HotdogSolid
HotelSolid
HotjarBrands
HotTubSolid
HourglassEndSolid
HourglassHalfSolid
HourglassRegular
HourglassSolid
HourglassStartSolid
HouseDamageSolid
HouseUserSolid
HouzzBrands
HryvniaSolid
HSquareSolid
Html5Brands
HubspotBrands
IceCreamSolid
IciclesSolid
IconsSolid
ICursorSolid
IdBadgeRegular
IdBadgeSolid
IdCardAltSolid
IdCardRegular
IdCardSolid
IdealBrands
IglooSolid
ImageRegular
ImageSolid
ImagesRegular
ImagesSolid
ImdbBrands
InboxSolid
IndentSolid
IndustrySolid
InfinitySolid
InfoCircleSolid
InfoSolid
InstagramBrands
InstagramSquareBrands
IntercomBrands
InternetExplorerBrands
InvisionBrands
IoxhostBrands
ItalicSolid
ItchIoBrands
ItunesBrands
ItunesNoteBrands
JavaBrands
JediOrderBrands
JediSolid
JenkinsBrands
JiraBrands
JogetBrands
JointSolid
JoomlaBrands
JournalWhillsSolid
JsBrands
JsfiddleBrands
JsSquareBrands
KaabaSolid
KaggleBrands
KeybaseBrands
KeyboardRegular
KeyboardSolid
KeycdnBrands
KeySolid
KhandaSolid
KickstarterBrands
KickstarterKBrands
KissBeamRegular
KissBeamSolid
KissRegular
KissSolid
KissWinkHeartRegular
KissWinkHeartSolid
KiwiBirdSolid
KorvueBrands
LandmarkSolid
LanguageSolid
LaptopCodeSolid
LaptopHouseSolid
LaptopMedicalSolid
LaptopSolid
LaravelBrands
LastfmBrands
LastfmSquareBrands
LaughBeamRegular
LaughBeamSolid
LaughRegular
LaughSolid
LaughSquintRegular
LaughSquintSolid
LaughWinkRegular
LaughWinkSolid
LayerGroupSolid
LeafSolid
LeanpubBrands
LemonRegular
LemonSolid
LessBrands
LessThanEqualSolid
LessThanSolid
LevelDownAltSolid
LevelUpAltSolid
LifeRingRegular
LifeRingSolid
LightbulbRegular
LightbulbSolid
LineBrands
LinkedinBrands
LinkedinInBrands
LinkSolid
LinodeBrands
LinuxBrands
LiraSignSolid
ListAltRegular
ListAltSolid
ListOlSolid
ListSolid
ListUlSolid
LocationArrowSolid
LockOpenSolid
LockSolid
LongArrowAltDownSolid
LongArrowAltLeftSolid
LongArrowAltRightSolid
LongArrowAltUpSolid
LowVisionSolid
LuggageCartSolid
LungsSolid
LungsVirusSolid
LyftBrands
MagentoBrands
MagicSolid
MagnetSolid
MailBulkSolid
MailchimpBrands
MaleSolid
MandalorianBrands
MapMarkedAltSolid
MapMarkerAltSolid
MapPinSolid
MapSignsSolid
MarkdownBrands
MarkerSolid
MarsDoubleSolid
MarsSolid
MarsStrokeHSolid
MarsStrokeSolid
MarsStrokeVSolid
MaskSolid
MastodonBrands
MaxcdnBrands
MdbBrands
MedalSolid
MedappsBrands
MediumBrands
MediumMBrands
MedkitSolid
MedrtBrands
MeetupBrands
MegaportBrands
MehBlankRegular
MehBlankSolid
MehRegular
MehRollingEyesRegular
MehRollingEyesSolid
MehSolid
MemorySolid
MendeleyBrands
MenorahSolid
MercurySolid
MeteorSolid
MicroblogBrands
MicrochipSolid
MicrophoneAltSlashSolid
MicrophoneAltSolid
MicrophoneSlashSolid
MicrophoneSolid
MicroscopeSolid
MicrosoftBrands
MinusCircleSolid
MinusSolid
MinusSquareRegular
MinusSquareSolid
MittenSolid
MixBrands
MixcloudBrands
MixerBrands
MizuniBrands
MobileAltSolid
MobileSolid
ModxBrands
MoneroBrands
MoneyBillAltRegular
MoneyBillAltSolid
MoneyBillSolid
MoneyBillWaveAltSolid
MoneyBillWaveSolid
MoneyCheckAltSolid
MoneyCheckSolid
MonumentSolid
MoonRegular
MoonSolid
MortarPestleSolid
MosqueSolid
MotorcycleSolid
MountainSolid
MousePointerSolid
MouseSolid
MugHotSolid
MusicSolid
NapsterBrands
NeosBrands
NetworkWiredSolid
NeuterSolid
NewspaperRegular
NewspaperSolid
NimblrBrands
NodeBrands
NodeJsBrands
NotEqualSolid
NotesMedicalSolid
NpmBrands
Ns8Brands
NutritionixBrands
ObjectGroupRegular
ObjectGroupSolid
ObjectUngroupRegular
ObjectUngroupSolid
OdnoklassnikiBrands
OdnoklassnikiSquareBrands
OilCanSolid
OldRepublicBrands
OmSolid
OpencartBrands
OpenidBrands
OperaBrands
OptinMonsterBrands
OrcidBrands
OsiBrands
OtterSolid
OutdentSolid
Page4Brands
PagelinesBrands
PagerSolid
PaintBrushSolid
PaintRollerSolid
PaletteSolid
PalfedBrands
PalletSolid
PaperclipSolid
PaperPlaneRegular
PaperPlaneSolid
ParachuteBoxSolid
ParagraphSolid
ParkingSolid
PassportSolid
PastafarianismSolid
PasteSolid
PatreonBrands
PauseCircleRegular
PauseCircleSolid
PauseSolid
PawSolid
PaypalBrands
PeaceSolid
PenAltSolid
PencilAltSolid
PencilRulerSolid
PenFancySolid
PenNibSolid
PennyArcadeBrands
PenSolid
PenSquareSolid
PeopleArrowsSolid
PeopleCarrySolid
PepperHotSolid
PercentageSolid
PercentSolid
PeriscopeBrands
PersonBoothSolid
PhabricatorBrands
PhoenixFrameworkBrands
PhoenixSquadronBrands
PhoneAltSolid
PhoneSlashSolid
PhoneSolid
PhoneSquareAltSolid
PhoneSquareSolid
PhoneVolumeSolid
PhotoVideoSolid
PhpBrands
PiedPiperAltBrands
PiedPiperBrands
PiedPiperHatBrands
PiedPiperPpBrands
PiedPiperSquareBrands
PiggyBankSolid
PillsSolid
PinterestBrands
PinterestPBrands
PinterestSquareBrands
PizzaSliceSolid
PlaceOfWorshipSolid
PlaneArrivalSolid
PlaneDepartureSolid
PlaneSlashSolid
PlaneSolid
PlayCircleRegular
PlayCircleSolid
PlaySolid
PlaystationBrands
PlugSolid
PlusCircleSolid
PlusSolid
PlusSquareRegular
PlusSquareSolid
PodcastSolid
PollHSolid
PollSolid
PoopSolid
PooSolid
PooStormSolid
PortraitSolid
PoundSignSolid
PowerOffSolid
PrayingHandsSolid
PraySolid
PrescriptionBottleAltSolid
PrescriptionBottleSolid
PrescriptionSolid
PrintSolid
ProceduresSolid
ProductHuntBrands
ProjectDiagramSolid
PumpMedicalSolid
PumpSoapSolid
PushedBrands
PuzzlePieceSolid
PythonBrands
QqBrands
QrcodeSolid
QuestionCircleRegular
QuestionCircleSolid
QuestionSolid
QuidditchSolid
QuinscapeBrands
QuoraBrands
QuoteLeftSolid
QuoteRightSolid
QuranSolid
RadiationAltSolid
RadiationSolid
RainbowSolid
RandomSolid
RaspberryPiBrands
RavelryBrands
ReactBrands
ReacteuropeBrands
ReadmeBrands
RebelBrands
ReceiptSolid
RecordVinylSolid
RecycleSolid
RedditAlienBrands
RedditBrands
RedditSquareBrands
RedhatBrands
RedoAltSolid
RedoSolid
RedRiverBrands
RegisteredRegular
RegisteredSolid
RemoveFormatSolid
RenrenBrands
ReplyAllSolid
ReplydBrands
ReplySolid
RepublicanSolid
ResearchgateBrands
ResolvingBrands
RestroomSolid
RetweetSolid
RevBrands
RibbonSolid
RingSolid
RoadSolid
RobotSolid
RocketchatBrands
RocketSolid
RockrmsBrands
RouteSolid
RProjectBrands
RssSolid
RssSquareSolid
RubleSignSolid
RulerCombinedSolid
RulerHorizontalSolid
RulerSolid
RulerVerticalSolid
RunningSolid
RupeeSignSolid
SadCryRegular
SadCrySolid
SadTearRegular
SadTearSolid
SafariBrands
SalesforceBrands
SassBrands
SatelliteDishSolid
SatelliteSolid
SaveRegular
SaveSolid
SchlixBrands
SchoolSolid
ScrewdriverSolid
ScribdBrands
ScrollSolid
SdCardSolid
SearchDollarSolid
SearchenginBrands
SearchLocationSolid
SearchMinusSolid
SearchPlusSolid
SearchSolid
SeedlingSolid
SellcastBrands
SellsyBrands
ServerSolid
ServicestackBrands
ShapesSolid
ShareAltSolid
ShareAltSquareSolid
ShareSolid
ShareSquareRegular
ShareSquareSolid
ShekelSignSolid
ShieldAltSolid
ShieldVirusSolid
ShippingFastSolid
ShipSolid
ShirtsinbulkBrands
ShoePrintsSolid
ShopifyBrands
ShoppingBagSolid
ShoppingBasketSolid
ShoppingCartSolid
ShopwareBrands
ShowerSolid
ShuttleVanSolid
SignalSolid
SignatureSolid
SignInAltSolid
SignLanguageSolid
SignOutAltSolid
SignSolid
SimCardSolid
SimplybuiltBrands
SistrixBrands
SitemapSolid
SithBrands
SkatingSolid
SketchBrands
SkiingNordicSolid
SkiingSolid
SkullCrossbonesSolid
SkullSolid
SkyatlasBrands
SkypeBrands
SlackBrands
SlackHashBrands
SlashSolid
SleighSolid
SlidersHSolid
SlideshareBrands
SmileBeamRegular
SmileBeamSolid
SmileRegular
SmileSolid
SmileWinkRegular
SmileWinkSolid
SmogSolid
SmokingBanSolid
SmokingSolid
SmsSolid
SnapchatBrands
SnapchatGhostBrands
SnapchatSquareBrands
SnowboardingSolid
SnowflakeRegular
SnowflakeSolid
SnowmanSolid
SnowplowSolid
SoapSolid
SocksSolid
SolarPanelSolid
SortAlphaDownAltSolid
SortAlphaDownSolid
SortAlphaUpAltSolid
SortAlphaUpSolid
SortAmountDownAltSolid
SortAmountDownSolid
SortAmountUpAltSolid
SortAmountUpSolid
SortDownSolid
SortNumericDownAltSolid
SortNumericDownSolid
SortNumericUpAltSolid
SortNumericUpSolid
SortSolid
SortUpSolid
SoundcloudBrands
SourcetreeBrands
SpaceShuttleSolid
SpaSolid
SpeakapBrands
SpeakerDeckBrands
SpellCheckSolid
SpiderSolid
SpinnerSolid
SplotchSolid
SpotifyBrands
SprayCanSolid
SquareFullSolid
SquareRegular
SquareRootAltSolid
SquareSolid
SquarespaceBrands
StackExchangeBrands
StackOverflowBrands
StackpathBrands
StampSolid
StarAndCrescentSolid
StarHalfAltSolid
StarHalfRegular
StarHalfSolid
StarOfDavidSolid
StarOfLifeSolid
StarRegular
StarSolid
StaylinkedBrands
SteamBrands
SteamSquareBrands
SteamSymbolBrands
StepBackwardSolid
StepForwardSolid
StethoscopeSolid
StickerMuleBrands
StickyNoteRegular
StickyNoteSolid
StopCircleRegular
StopCircleSolid
StopSolid
StopwatchSolid
StoreAltSlashSolid
StoreAltSolid
StoreSlashSolid
StoreSolid
StravaBrands
StreamSolid
StreetViewSolid
StrikethroughSolid
StripeBrands
StripeSBrands
StroopwafelSolid
StudiovinariBrands
StumbleuponBrands
StumbleuponCircleBrands
SubscriptSolid
SubwaySolid
SuitcaseRollingSolid
SuitcaseSolid
SunRegular
SunSolid
SuperpowersBrands
SuperscriptSolid
SuppleBrands
SurpriseRegular
SurpriseSolid
SuseBrands
SwatchbookSolid
SwiftBrands
SwimmerSolid
SwimmingPoolSolid
SymfonyBrands
SynagogueSolid
SyncAltSolid
SyncSolid
SyringeSolid
TableSolid
TabletAltSolid
TableTennisSolid
TabletSolid
TabletsSolid
TachometerAltSolid
TagSolid
TagsSolid
TapeSolid
TasksSolid
TaxiSolid
TeamspeakBrands
TeethOpenSolid
TeethSolid
TelegramBrands
TelegramPlaneBrands
TemperatureHighSolid
TemperatureLowSolid
TencentWeiboBrands
TengeSolid
TerminalSolid
TextHeightSolid
TextWidthSolid
TheaterMasksSolid
ThemecoBrands
ThemeisleBrands
TheRedYetiBrands
ThermometerEmptySolid
ThermometerFullSolid
ThermometerHalfSolid
ThermometerQuarterSolid
ThermometerSolid
ThermometerThreeQuartersSolid
ThinkPeaksBrands
ThLargeSolid
ThListSolid
ThSolid
ThumbsDownRegular
ThumbsDownSolid
ThumbsUpRegular
ThumbsUpSolid
ThumbtackSolid
TicketAltSolid
TimesCircleRegular
TimesCircleSolid
TimesSolid
TintSlashSolid
TintSolid
TiredRegular
TiredSolid
ToggleOffSolid
ToggleOnSolid
ToiletPaperSlashSolid
ToiletPaperSolid
ToiletSolid
ToolboxSolid
ToolsSolid
ToothSolid
TorahSolid
ToriiGateSolid
TractorSolid
TradeFederationBrands
TrademarkSolid
TrafficLightSolid
TrailerSolid
TrainSolid
TramSolid
TransgenderAltSolid
TransgenderSolid
TrashAltRegular
TrashAltSolid
TrashRestoreAltSolid
TrashRestoreSolid
TrashSolid
TreeSolid
TrelloBrands
TrophySolid
TruckLoadingSolid
TruckMonsterSolid
TruckMovingSolid
TruckPickupSolid
TruckSolid
TshirtSolid
TtySolid
TumblrBrands
TumblrSquareBrands
TvSolid
TwitchBrands
TwitterBrands
TwitterSquareBrands
Typo3Brands
UberBrands
UbuntuBrands
UikitBrands
UmbracoBrands
UmbrellaBeachSolid
UmbrellaSolid
UnderlineSolid
UndoAltSolid
UndoSolid
UniregistryBrands
UnityBrands
UniversalAccessSolid
UniversitySolid
UnlinkSolid
UnlockAltSolid
UnlockSolid
UntappdBrands
UploadSolid
UpsBrands
UsbBrands
UserAltSlashSolid
UserAltSolid
UserAstronautSolid
UserCheckSolid
UserCircleRegular
UserCircleSolid
UserClockSolid
UserCogSolid
UserEditSolid
UserFriendsSolid
UserGraduateSolid
UserInjuredSolid
UserLockSolid
UserMdSolid
UserMinusSolid
UserNinjaSolid
UserNurseSolid
UserPlusSolid
UserRegular
UsersCogSolid
UserSecretSolid
UserShieldSolid
UserSlashSolid
UserSolid
UsersSolid
UserTagSolid
UserTieSolid
UserTimesSolid
UspsBrands
UssunnahBrands
UtensilSpoonSolid
UtensilsSolid
VaadinBrands
VectorSquareSolid
VenusDoubleSolid
VenusMarsSolid
VenusSolid
ViacoinBrands
ViadeoBrands
ViadeoSquareBrands
VialSolid
VialsSolid
ViberBrands
VideoSlashSolid
VideoSolid
ViharaSolid
VimeoBrands
VimeoSquareBrands
VimeoVBrands
VineBrands
VirusesSolid
VirusSlashSolid
VirusSolid
VkBrands
VnvBrands
VoicemailSolid
VolleyballBallSolid
VolumeDownSolid
VolumeMuteSolid
VolumeOffSolid
VolumeUpSolid
VoteYeaSolid
VrCardboardSolid
VuejsBrands
WalkingSolid
WalletSolid
WarehouseSolid
WaterSolid
WaveSquareSolid
WazeBrands
WeeblyBrands
WeiboBrands
WeightHangingSolid
WeightSolid
WeixinBrands
WhatsappBrands
WhatsappSquareBrands
WheelchairSolid
WhmcsBrands
WifiSolid
WikipediaWBrands
WindowCloseRegular
WindowCloseSolid
WindowMaximizeRegular
WindowMaximizeSolid
WindowMinimizeRegular
WindowMinimizeSolid
WindowRestoreRegular
WindowRestoreSolid
WindowsBrands
WindSolid
WineBottleSolid
WineGlassAltSolid
WineGlassSolid
WixBrands
WizardsOfTheCoastBrands
WolfPackBattalionBrands
WonSignSolid
WordpressBrands
WordpressSimpleBrands
WpbeginnerBrands
WpexplorerBrands
WpformsBrands
WpressrBrands
WrenchSolid
XboxBrands
XingBrands
XingSquareBrands
XRaySolid
YahooBrands
YammerBrands
YandexBrands
YandexInternationalBrands
YarnBrands
YCombinatorBrands
YelpBrands
YenSignSolid
YinYangSolid
YoastBrands
YoutubeBrands
YoutubeSquareBrands
Named colors for ACTION icons

A table of named colors

PDF document

Will show a pdf with an optional preview. The options are:

  • source an url (remote or local) to the pdf to show
  • header and body if set these will be shown instead of the source
  • linkText an optional text (or unicode icon) to show as a link to the source file
  • link an optional link to direct the user to (default is value of source)
  • height the height of the preview pane in pixels
  • collapsible whether or not the preview should be collapsible (default false)
  • collapsed the initial state of the preview (default false)
  • saveable whether or not it should be possible to save the pdf (default true)
  • printable whether or not it should be possible to print the pdf (default true)
  • focus whether or not the item should have focus (only the first item with this property set to true will be focused)

HTML page

Will render a HTML snippet or a whole HTML page into an item. Should be used for render styled text, e.g. headers and such - not recommended for complete pages. Options are:

  • source html text or an url (remote or local) to the pdf to show
  • height the height of the item
  • focus whether or not the item should have focus (only the first item with this property set to true will be focused)
  • browser which browser engine to use "IE" (default) or "Edge"

Will act as a link (e.g. to an internet resource or a local file).

  • link the link to activate (when clicked)
  • text optional - the text to display (default is the url of the link)
  • prefix optional - the text to display before the link text
  • suffix optional - the text to display after the link text
  • focus whether or not the item should have focus (only the first item with this property set to true will be focused)

FLOWTRACER

Shows the flow tracer notification embedded in a sticky

Options are:

  • showFlow (bool, default true)
  • showStep (bool, default true)
  • showStopButton (bool, default true)
  • showPlayPauseButton (bool, default true)
  • showDebugButton (bool, default true)

Which are switches for the various UI elements in the sticky. It has the following actions:

  • primary: stop flow if showStopButton else play/pause if showPlayPauseButton else debug if showDebugButton
  • secondary: play/pause if showPlayPauseButton else debug if showDebugButton
  • tertiary: debug if showDebugButton

Example

javascript
Sticky.open(
  "tracer",
  {
    title: "Tracer",
    showFooter: true,
    items: [
      {
        type: 'FLOWTRACER',
        showStep: false
      },
    ]
  }
);

It looks like:

Flow tracer active buttons

when a flow is running, and:

Flow tracer inactive buttons

when the flow is done/no flow is running.

PROGRESS

You can instantiate a Progress instance and use it to indicate progress on some task. The Progress object can be given to both a Sticky and a notification to display progress bars. A Progress object is essentially either a single progress tracker or a list or tree of other Progress objects to track.

If you just need a simple progress bar, you can do:

js
var p = new Progress("Simple progress");
// indicate some progress has been made
p.complete(0.75); // 75%

The .complete(...) method is used to indicate the level of progress. It can be invoked with a decimal value (e.g. 0.75) to indicate the completion percentage or with no arguments to complete the progress bar fully (100% done).

A Progress object also has a state which can be;

  • NotBegun
  • Ongoing
  • Completed
  • Failed

The state is rendered as a coloured icon. If you use the Progress from the previous example in a Sticky like below.

js
// assume p from previous example
Sticky.open(
  "progressExample",
  {
    items: [{ type: 'PROGRESS', progress: p }]
  }
);

This is displayed as:

A simple Progress rendered in a sticky

Custom appearance

Where the blue “play” icon indicates that the Progress is Ongoing. You can customise the appearance of a progress by giving it an options arg (3rd argument) in the constructor.

js
var p = new Progress(
  "Simply progress", 
  [], 
  { barColor: "Pink", ongoingIcon: "BugSolid" }
);

You will get the following Sticky appearance.

Simple Progress with custom color

The following appearance configuration is available:

  • barColor the background color for the progress bar (default is greenish) (default light green) – for available colours see the action documentation
  • ongoingIconColor the foreground color for the icon shown when the state of the Progress is Ongoing (default blue)
  • notBegunIconColor the color for the icon when in the NotBegun state (default light gray)
  • completedIconColor the color for the icon when in the Completed state (default green)
  • failedIconColor the color for the icon when in the Failed state (default red)
  • ongoingIcon the icon for the Ongoing state – for available icons see the action documentation
  • notBegunIcon the icon for the NotBegun state
  • completedIcon the icon for the Completed state
  • failedIcon the icon for the Failed state

It is also possible to specify configuration options directly on a Progress object, e.g.:

js
p.failedIcon = "CocktailSolid";
p.failedIconColor = "HotPink";

Indeterminate state

Instead of showing a completed percentage you can put the Progress in an indeterminate state when it is Ongoing to show something is going on. One way to do this is to invoke the .start() method:

js
// start puts the Progress in Ongoing state
p.start();
p.indeterminate = true;
// or a shorter version
p.start(true);

This will appear in a Sticky as.

Progress in indeterminate state

Multiple steps

You can nest multiple Progress objects if the task you are tracking consists of multiple steps. Steps are added in the 2nd argument to the Progress constructor:

js
var step1 = new Progress("Step 1");
var step2 = new Progress("Step 2");
var step3 = new Progress("Step 3");
var main  = new Progress("Main", [step1, step2, step3]);

The main progress will automatically set its completion level based on its sub-steps. If we e.g. do step2.complete(); it will show as:

Multiple steps in Progress

Indicating that step2 is complete and the main task is ongoing.

You can also use the .next() method to step through the sub-steps of a Progress:

js
Wait.forSeconds(1);
main.next();          // start step 1
Wait.forSeconds(1);
main.next();          // complete step 1, start step 2
Wait.forSeconds(1);
main.next();          // complete step 2, start step 3
Wait.forSeconds(1);
main.next();          // complete step 3 (main will now complete as all sub-steps are completed)

This will look like the following:

Progress animated

You can also partially complete sub-steps to have the main Progress update as well:

js
step1.complete(0.23);
step2.complete(0.67);
step3.complete(0.86);

Propagation of completeness levels

Failing a sub-step with e.g. step2.fail() will also fail the main Progress.

You can nest Progress items in an arbitrary depth:

js
var main  = new Progress(
  "Main", 
  [
    new Progress(
      "Step 1", 
      [
        new Progress("Step 1.1"), 
        new Progress("Step 1.2") 
      ]
    )
  ]
);

To render as:

Progress tree

Starting a sub-step will cause parents to be started as well. Here we’ve started the “Step 1.2” sub-step:

Progress tree with Step 1.2 begun

Further configuration options

Further Progress configuration options are:

  • showPercentCompleteText whether or not to show the completed percentage as a text on the progress bar (default false)
  • showCounters whether or not to show counts for sub-steps (total, completed and failed) (default false)
  • showCurrentStep whether to show the name of the current Ongoing sub-step on the parent (default false)

The showCurrentStep configuration option for a Progress is used to indicate which sub-step is currently active on a parent-step. E.g.:

js
var main  = new Progress(
  "Main", 
  [
    new Progress(
      "Step 1", 
      [
        new Progress("Step 1.1"), 
        new Progress("Step 1.2") 
      ],
      { showCurrentStep: true }
    )
  ],
  { showCurrentStep: true }
);

To get:

Progress where parent shows information about children state

An example of the showCounters option to display counters (total, completed and failed) on a parent-step:

Progress where parent shows counters for children

Use in notifications

A Progress can also be used in a notification. It will be rendered as a very simple progress bar and does not support the appearance configuration that is used for the Sticky UI. An example:

js
var pn = new Progress("My progress");
Notification.progress("Show a Progress", "In a notification", pn);
pn.complete(0.72);

A progress can also be used notifications

The notification will be closed ~5s after the Progress is completed.

Interacting with a Progress

We’ve already seen some examples of interacting with a Progress object using e.g. the .complete(...) and the .next() methods. The full API for Progress is given here:

Properties
  • description (string) to update the text shown
  • steps (array) will return a list of sub-steps as an array of Progress objects (you can also set the sub-steps to a given array)
  • current (Progress) can be used to get the first Ongoing sub-step of a parent Progress
  • indeterminate (bool) to get/set whether the state of the Progress is indeterminate
  • state (string) to get/set the current state of the Progress object
  • fractionComplete (number) to get/set the completion level from 0-1
  • totalSteps (number) to get the total sub-steps
  • completedSteps (number) to get the number of completed sub-steps
  • failedSteps (number) to get the number of failed sub-steps

All configuration options are available to set/get:

  • showCurrentStep (bool)
  • showCounters (bool)
  • showPercentageCompleteText (bool)
  • showSteps (bool)

Furthermore the appearance configuration options can also be read/written after the Progress object is constructed via:

  • barColor
  • ongoingIconColor
  • notBegunIconColor
  • completedIconColor
  • failedIconColor
  • ongoingIcon
  • notBegunIcon
  • completedIcon
  • failedIcon

Methods

The following methods are also available:

  • start() will set the Progress to Ongoing and if given a boolean as argument it will set the indeterminate state to it.
  • next() will, when used on a Progress with sub-steps, complete the first non-completed sub-step and start the next step.
  • complete(percentage) will update the completed percentage and if no percentage argument is given then complete (100%) the Progress object.
  • fail() will cause the state to change to failed and indeterminate will be set to false.
  • reset() will reset completed progress on Progress and all-substeps.

MARKDOWN

The MARKDOWN sticky element item can display markdown formatted text, e.g.

js
Sticky.open(
  ...
  {
    foo: { type: "MARKDOWN", text: "Hello\n*this* is **markdown**" }
  }
);

Model

Get the model used to construct the sticky,

Parameter

  • name the name of the sticky to retrieve the model for (must be opened prior…)

Example

javascript
var m = Sticky.model('mySticky');
// Perhaps do some changes to model m and then
// Sticky.open('mySticky', m);
// to update the stikcy with the changes made to its model

Close

Close a named sticky.

Parameter

  • name the name of the sticky to close (must be opened prior…)

Example

javascript
Sticky.close('mySticky');

Hide

Hide a named sticky.

Parameter

  • name the name of the sticky to hide (must be opened prior…)

Example

javascript
Sticky.hide('mySticky');

Show

Show a previously hidden sticky.

Parameter

  • name the name of the sticky to show (must be hidden prior…)

Example

javascript
Sticky.show('mySticky');