Improve your shiny application appearance Chitose Neal min Intro Inthe previous post on Shiny ( hess), we focused cn the main functions to on. sing to fecus crly on the User interface (UN, and cok at move pessbilt iutthe user interface iv a FlusdPage() function * We used a type of layout to disolay @ sidebar on tre left and a main canel + We used different types of inguts anc outputs. regcing to + Linderstare tre fLicrage layout t 0 tre igh mere inputs + Customize the apcearance with new tienes id sonalized layout Sidebar Layout rrost commran presentation is the sidebar Layct, whien ras a dedicated fLrction sadebarLayout(), with two he sidebarPanel() which cont Puts a“d the nainPane}() which contains t sbrary(eriny oo Aone ‘stleFanel (Wy application"), layout dear Panel (hy sidebse), rsareaneL( Wy content") ) server functieninpst, output, 588660) ( > shinytop(us, server) My application bay content My sidebar reer, and the main panel 2/3 It ca ne wict” t 6ts flutdPage(, ‘stdePane(Wy application) seerLayout( “sdenorbael(-hy esdobar™, 38th = 6) reinone1(y content, wth = 6) ) ) shanyton(ut, server) My application My content My sigebar sidebarLayout() if 3 ready-to-use layout in Sriry, that is usec inside a Ls page laycut. fBLtycu can go further in the way you want to present your appliaticr by building your cwn layout wit” Fi page layout, menus, care’ anc tabs, Fluid Page Layout ‘A fluc page layout is composes of revs, e3C” of therr car be divided ay colunrs. x ate rows, we Lse the Function FlutaRow() like this i fluraget seelopanel(my application’), ‘dont Sy frat coe ». ‘utdton “wy cand ro ) ’ shayhop(us, server) My application My rst row My second row To create @ column, we use tre function column() inside a fluidRow() (or a fixedRow()), The wicth of a alums sum of al the cclumn wict". So for examole,ifwe acd a column of widt” 4 and a colin of wicth 3, trere will bean emety space cf with 5 or He right. The cclurr furction Fas also an offset rarreter te shift the colunrs on tl Lets lees at an examaiets flutdPage(, ‘stdePane(Wy application) tow ‘celia textput( "tert, “Enter something") d. cota, extinput( "text, “Enter conething else") ’ » tow elim’, ‘extinput("text3", “Eater another thing") ) ) , shinytoo(ut, server) My application Enter something Enter something else Enter anowner thing Adon nth mw eed ist ‘To recap, a id sage is a rid system, wner axis oy column c> a “2 unit wide range. the elements can te placec on the vertical axis ty rows, 2-2 on the horizontal vi © FludPage ‘eitdePanel "My application"), Eluidtont My application {ener someting PanelsPanels are used to grcup e.ements togethe: a functiora: (al wellPanel ‘The wallPanel furctic~ group the elements includ: ice the canel and disalay ther with a berder a a Flaiaget seeanel( hy sopestion), aon cxtuons, well2ane( ‘entEngur next", "Ener sametning") textimut(“tort2", “Enter saneting elze") ) eweianed d. cotum(, entnput( "text, “Enter another thing") D , D shinopiut, server) My application Enter another thing Enter something Enter something else ‘tab Panel We saw an exar ple of using diffeet tabs to display the result i> the erevious pest This easily © Using tabsetPanel() function tow the canel ard eabPanel() fe ‘tabPanel() ‘as two cararneters b to cisplay of the output‘Tibrary(paimerpenguins) oe Fleaget scercoput{ioguttd = “bs11_Aegth', Tebel + "Select the range of BEML legth?", veloe = 6(46,58), in = 9, = 88), eoPanel(titte + “Pot plotutpue( penn eopaned(titte # “ebte" ‘sbleoutputpengun. et) , server «= functieninpst, output date «reactive woset( penguins, BALL tengthsm > soputSbtnLLngth[7] § BULL lengthen « ioputsbitLegeh(2]) » cvtputSpenquin.glot < renderPlot({ slot(seta)Sos11_teptham, aata()6B11 length.m, cot = eata)Sepectes) » cutpurSpangsn.table < randortable(4 at) » ) hinyop(us, server) Pit Table : 2 : : ee ot s . aaysul_sep_eum Navigation list Panel deve with naviistPanel() Under different categcries as We might wart tc disslay the selection of ti instead cf tabsetPanel(), With a navigatior lis, youshewn in the fe..cwing exarrale utdPaet ‘atsearznper(snoutta = "B10 nnsLictPaet( sabfanel(titie = “Plot ploroutput(penguinpict”) ) sabpanel(sitie = “Tae’ tebteovtut(-penguin-ab16") ) ‘cabpanei(titie + “Penguin's 2tfe", toxtOutput( penguin text") > servar « funetien(anpt, output) ata < rencttve(( ‘auncet(panuins, bslL_lengtham » smpoos2l-lengt] & as11tagthan + tapatbsl2-lengeh21) » outputSpangin plot < randarPlot(t plot(seta()S4i1 depths, datar)S0L21 tength.m, cot = eata)Sspectes) » cvtputSpenguin-table « randerTable cecal) » cuspurSpangn.tont < redertont(( “Lat Sntrodien you te the Le of the Pliers Penguins » , atsnpton(ut, server) Select the range of bl length? rath", label = “Select he ronge of BILL Iength?, volue + o{4,58), min = 32, @ o o @ Fe eee EE Penguins Tale E History . . . Penguins ite = 2 tas deph im raison teas Fixed page vs fluid pageFlusdPage() (with FlutdRon() ) to creste tre JLT sing fixedPege() ference between the twe is th fluidPaee, the content adact \e FxecFage ha ed picture below illustrate tris beravic when yu would wart to Use fsxedPage() irsteac of flusdPage() is tor 5 nif the ension (ce that you car out such as sidebarLayout() while wording wit Nhile Using FaxedPage(), ¥C 2 FxedRow() instead cf flusdRow() Example cf a FxedPasNavigation bar top level ravigation tar with the navbarPage() friction, Tz syntax is similar to te tab parel or ravigation tabPane1() to create the different ta: from the navbarPage() options. We can Create 2 full menu as well rt T° options, We can creat panel, and we by Using the navbarmenu() furcticn a*d @Dup the tabpanel() urcier siffe sbrary(pene-penauine) os Hutrage( nastarbaget wy navigation bar sbPanel( ora’ steering rps d asbartent-Aeslyese", ‘sanrarel( Plot" plotoutputtperauin ist") ) seopanet( “able abteoutut( “penguin tabte") ) (60,58), mone 32, ae server « funationinpst, overt dace «rection set(perguine, Bill tengtham » SoputSbinl length(>] § BALL tangthon « soputshst2Legeh(2]) » cutputSpanguin plot < rener#200({ plat(seta)981l-soptham, asta()904.length.m, cot = cata) Specses) » cutputSpongin-table < randertable(( aaa) » outputSpangun tent < rnderTont({ “Larne sreraeuce you t9 the ate of the Paner's Penguins » > shinop(us, server)My navigation bar Input Analysts + die acl ge & Z@ ofa, . 5 a “ e fo i “4 6 0 2 to dept nm ‘Themes Shinythemes So far we used caly the default boctstrap theme. We can use different i our apaiication, ‘Tre easiest way is trough the shirythemes sackaee, to nota packapetshinythenes") ‘Then oad the package, arin the ui, acd the theme ‘apoeararce to 16s to Sve a cifferert anc be startes install te them with the function shinytheme(" thene_nase") a5 shown below:‘Tibrary(shinythones) ythenel superhero") ) ravbarPage( sLiderinut(snputtd = “b.n1_tengeh bel = "Select the range of DELL Leng", value = e(60,56), in = 32, nox = avarteru(Arahysi bPaned( Plot lotoutut(‘perguin pet") sbPonet( Tate ‘tableoutput( penguin. table") ist ofall available t cance found cnt {cr cietly to the aap, t me you wart OF paiication look. To co tat, just acd the cal. to the functica themeselector() ir t= aserary(shnytnenes)NNEC Ca es Custom theme IroW", you need ingline in your ui po di sing themr2s, cistom CSS, avascript, ar there are mary v@ain on str tate pols and“+ M5 Forecasting Accuracy Competitian Peace tee ‘ewer der cenvsase 2OH®D lee wt wena eats yee on