[{"data":1,"prerenderedAt":2108},["ShallowReactive",2],{"doc-content/docs/developer/widget-settings":3,"doc-surroundings/docs/developer/widget-settings":2017,"docs-navigation":2024},{"path":4,"draft":5,"date":6,"dateUpdated":7,"title":8,"body":9,"description":2016,"image":6,"imageAlt":6},"/docs/developer/widget-settings",false,null,"2025-05-15","Widget Settings",{"type":10,"value":11,"toc":1994},"minimark",[12,16,20,23,26,31,43,111,114,116,120,127,142,149,195,198,206,208,212,215,267,269,273,276,278,282,285,327,329,333,336,369,371,375,378,509,511,515,518,639,641,644,647,703,705,709,712,765,767,771,774,850,890,892,896,899,978,980,984,991,1046,1053,1991],[13,14,8],"h1",{"id":15},"widget-settings",[17,18,19],"p",{},"Most widgets will have, at minimum, color controls which allow a user to style a widget.",[17,21,22],{},"However, there are a variety of other settings that developers can implement as well, such as toggle switches, drop-down menus, sliders, etc. This page describes those settings.",[24,25],"hr",{},[27,28,30],"h2",{"id":29},"setting-declarations","Setting Declarations",[17,32,33,34,38,39,42],{},"Settings are defined in the ",[35,36,37],"code",{},"widget.json"," file, inside the ",[35,40,41],{},"settings[]"," array:",[44,45,54],"pre",{"className":46,"code":47,"filename":37,"highlights":48,"language":52,"meta":53,"style":53},"language-json shiki shiki-themes github-dark github-dark","{\n    \"name\": \"My Widget\",\n    \"settings\": [\n        // Settings go here\n    ]\n}\n",[49,50,51],3,4,5,"json","",[35,55,56,65,82,92,99,105],{"__ignoreMap":53},[57,58,61],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"suv1-","{\n",[57,66,68,72,75,79],{"class":59,"line":67},2,[57,69,71],{"class":70},"s8ozJ","    \"name\"",[57,73,74],{"class":63},": ",[57,76,78],{"class":77},"s4wv1","\"My Widget\"",[57,80,81],{"class":63},",\n",[57,83,86,89],{"class":84,"line":49},[59,85],"highlight",[57,87,88],{"class":70},"    \"settings\"",[57,90,91],{"class":63},": [\n",[57,93,95],{"class":94,"line":50},[59,85],[57,96,98],{"class":97},"sJ8bj","        // Settings go here\n",[57,100,102],{"class":101,"line":51},[59,85],[57,103,104],{"class":63},"    ]\n",[57,106,108],{"class":59,"line":107},6,[57,109,110],{"class":63},"}\n",[17,112,113],{},"You'll find a full list of settings below.",[24,115],{},[27,117,119],{"id":118},"interacting-with-settings","Interacting with settings",[17,121,122,123,126],{},"All widget settings are injected into to the ",[35,124,125],{},"settings"," property of the Hologram object.",[44,128,132],{"className":129,"code":130,"language":131,"meta":53,"style":53},"language-js shiki shiki-themes github-dark github-dark","this.settings.nameOfSetting\n","js",[35,133,134],{"__ignoreMap":53},[57,135,136,139],{"class":59,"line":60},[57,137,138],{"class":70},"this",[57,140,141],{"class":63},".settings.nameOfSetting\n",[17,143,144,145,148],{},"For example, if your create a bool toggle setting with a name of ",[35,146,147],{},"showTime",", as shown here:",[44,150,152],{"className":46,"code":151,"language":52,"meta":53,"style":53},"{\n    \"name\": \"showTime\",\n    \"type\": \"bool\",\n    \"defaultValue\": false\n}\n",[35,153,154,158,169,181,191],{"__ignoreMap":53},[57,155,156],{"class":59,"line":60},[57,157,64],{"class":63},[57,159,160,162,164,167],{"class":59,"line":67},[57,161,71],{"class":70},[57,163,74],{"class":63},[57,165,166],{"class":77},"\"showTime\"",[57,168,81],{"class":63},[57,170,171,174,176,179],{"class":59,"line":49},[57,172,173],{"class":70},"    \"type\"",[57,175,74],{"class":63},[57,177,178],{"class":77},"\"bool\"",[57,180,81],{"class":63},[57,182,183,186,188],{"class":59,"line":50},[57,184,185],{"class":70},"    \"defaultValue\"",[57,187,74],{"class":63},[57,189,190],{"class":70},"false\n",[57,192,193],{"class":59,"line":51},[57,194,110],{"class":63},[17,196,197],{},"You would access it like so:",[44,199,204],{"className":200,"code":202,"language":203},[201],"language-text","this.settings.showTime\n","text",[35,205,202],{"__ignoreMap":53},[24,207],{},[27,209,211],{"id":210},"watching-for-setting-changes","Watching for setting changes",[17,213,214],{},"Most of the time, when a user makes a setting change it will be dynamically updated in your widget. However, there are cases when you might need to explicitly know when a user has changed a setting in order to dynamically perform some action. Because the settings are part of the widget data object, your can use the Vue watch method:",[44,216,218],{"className":129,"code":217,"language":131,"meta":53,"style":53},"{\n    watch: {\n        'setting.showTime': function() {\n            // This is called whenever the showTime setting has changed\n        }\n    }\n}\n",[35,219,220,224,233,247,252,257,262],{"__ignoreMap":53},[57,221,222],{"class":59,"line":60},[57,223,64],{"class":63},[57,225,226,230],{"class":59,"line":67},[57,227,229],{"class":228},"sFR8T","    watch",[57,231,232],{"class":63},": {\n",[57,234,235,238,240,244],{"class":59,"line":49},[57,236,237],{"class":77},"        'setting.showTime'",[57,239,74],{"class":63},[57,241,243],{"class":242},"sOPea","function",[57,245,246],{"class":63},"() {\n",[57,248,249],{"class":59,"line":50},[57,250,251],{"class":97},"            // This is called whenever the showTime setting has changed\n",[57,253,254],{"class":59,"line":51},[57,255,256],{"class":63},"        }\n",[57,258,259],{"class":59,"line":107},[57,260,261],{"class":63},"    }\n",[57,263,265],{"class":59,"line":264},7,[57,266,110],{"class":63},[24,268],{},[13,270,272],{"id":271},"fieldtypes","FieldTypes",[17,274,275],{},"Widgets can define the following fieldtypes that users can interact with when they edit a widget's settings.",[24,277],{},[27,279,281],{"id":280},"bool","Bool",[17,283,284],{},"A simple boolean toggle.",[44,286,288],{"className":46,"code":287,"language":52,"meta":53,"style":53},"{\n    \"name\": \"showWeather\",\n    \"type\": \"bool\",\n    \"defaultValue\": false\n}\n",[35,289,290,294,305,315,323],{"__ignoreMap":53},[57,291,292],{"class":59,"line":60},[57,293,64],{"class":63},[57,295,296,298,300,303],{"class":59,"line":67},[57,297,71],{"class":70},[57,299,74],{"class":63},[57,301,302],{"class":77},"\"showWeather\"",[57,304,81],{"class":63},[57,306,307,309,311,313],{"class":59,"line":49},[57,308,173],{"class":70},[57,310,74],{"class":63},[57,312,178],{"class":77},[57,314,81],{"class":63},[57,316,317,319,321],{"class":59,"line":50},[57,318,185],{"class":70},[57,320,74],{"class":63},[57,322,190],{"class":70},[57,324,325],{"class":59,"line":51},[57,326,110],{"class":63},[24,328],{},[27,330,332],{"id":331},"date-picker","Date Picker",[17,334,335],{},"A date and time picker. The value is returned as unix time. You can also set the default value to a unix time date.",[44,337,339],{"className":46,"code":338,"language":52,"meta":53,"style":53},"{\n    \"name\": \"countdownDate\",\n    \"type\": \"date-picker\"\n}\n",[35,340,341,345,356,365],{"__ignoreMap":53},[57,342,343],{"class":59,"line":60},[57,344,64],{"class":63},[57,346,347,349,351,354],{"class":59,"line":67},[57,348,71],{"class":70},[57,350,74],{"class":63},[57,352,353],{"class":77},"\"countdownDate\"",[57,355,81],{"class":63},[57,357,358,360,362],{"class":59,"line":49},[57,359,173],{"class":70},[57,361,74],{"class":63},[57,363,364],{"class":77},"\"date-picker\"\n",[57,366,367],{"class":59,"line":50},[57,368,110],{"class":63},[24,370],{},[27,372,374],{"id":373},"select","Select",[17,376,377],{},"A dropdown with a list of options.",[44,379,381],{"className":46,"code":380,"language":52,"meta":53,"style":53},"{\n    \"name\": \"pickANumber\",\n    \"type\": \"select\",\n    \"defaultValue\": \"1\",\n    \"options\": [\n        { \"value\": \"1\", \"label\": \"One\" },\n        { \"value\": \"2\", \"label\": \"Two\" },\n        { \"value\": \"3\", \"label\": \"Three\" }\n    ]\n}\n",[35,382,383,387,398,409,420,427,453,475,499,504],{"__ignoreMap":53},[57,384,385],{"class":59,"line":60},[57,386,64],{"class":63},[57,388,389,391,393,396],{"class":59,"line":67},[57,390,71],{"class":70},[57,392,74],{"class":63},[57,394,395],{"class":77},"\"pickANumber\"",[57,397,81],{"class":63},[57,399,400,402,404,407],{"class":59,"line":49},[57,401,173],{"class":70},[57,403,74],{"class":63},[57,405,406],{"class":77},"\"select\"",[57,408,81],{"class":63},[57,410,411,413,415,418],{"class":59,"line":50},[57,412,185],{"class":70},[57,414,74],{"class":63},[57,416,417],{"class":77},"\"1\"",[57,419,81],{"class":63},[57,421,422,425],{"class":59,"line":51},[57,423,424],{"class":70},"    \"options\"",[57,426,91],{"class":63},[57,428,429,432,435,437,439,442,445,447,450],{"class":59,"line":107},[57,430,431],{"class":63},"        { ",[57,433,434],{"class":70},"\"value\"",[57,436,74],{"class":63},[57,438,417],{"class":77},[57,440,441],{"class":63},", ",[57,443,444],{"class":70},"\"label\"",[57,446,74],{"class":63},[57,448,449],{"class":77},"\"One\"",[57,451,452],{"class":63}," },\n",[57,454,455,457,459,461,464,466,468,470,473],{"class":59,"line":264},[57,456,431],{"class":63},[57,458,434],{"class":70},[57,460,74],{"class":63},[57,462,463],{"class":77},"\"2\"",[57,465,441],{"class":63},[57,467,444],{"class":70},[57,469,74],{"class":63},[57,471,472],{"class":77},"\"Two\"",[57,474,452],{"class":63},[57,476,478,480,482,484,487,489,491,493,496],{"class":59,"line":477},8,[57,479,431],{"class":63},[57,481,434],{"class":70},[57,483,74],{"class":63},[57,485,486],{"class":77},"\"3\"",[57,488,441],{"class":63},[57,490,444],{"class":70},[57,492,74],{"class":63},[57,494,495],{"class":77},"\"Three\"",[57,497,498],{"class":63}," }\n",[57,500,502],{"class":59,"line":501},9,[57,503,104],{"class":63},[57,505,507],{"class":59,"line":506},10,[57,508,110],{"class":63},[24,510],{},[27,512,514],{"id":513},"picker","Picker",[17,516,517],{},"Creates a set of horizontal buttons when you have a small number of options. If there are more than 5 options, this field will turn into a select field.",[44,519,521],{"className":46,"code":520,"language":52,"meta":53,"style":53},"{\n    \"name\": \"backgroundStyle\",\n    \"type\": \"picker\",\n    \"defaultValue\": \"normal\",\n    \"options\": [\n        { \"value\": \"darker\", \"label\": \"Darker\" },\n        { \"value\": \"normal\", \"label\": \"Normal\" },\n        { \"value\": \"lighter\", \"label\": \"Lighter\" }\n    ]\n}\n",[35,522,523,527,538,549,560,566,588,609,631,635],{"__ignoreMap":53},[57,524,525],{"class":59,"line":60},[57,526,64],{"class":63},[57,528,529,531,533,536],{"class":59,"line":67},[57,530,71],{"class":70},[57,532,74],{"class":63},[57,534,535],{"class":77},"\"backgroundStyle\"",[57,537,81],{"class":63},[57,539,540,542,544,547],{"class":59,"line":49},[57,541,173],{"class":70},[57,543,74],{"class":63},[57,545,546],{"class":77},"\"picker\"",[57,548,81],{"class":63},[57,550,551,553,555,558],{"class":59,"line":50},[57,552,185],{"class":70},[57,554,74],{"class":63},[57,556,557],{"class":77},"\"normal\"",[57,559,81],{"class":63},[57,561,562,564],{"class":59,"line":51},[57,563,424],{"class":70},[57,565,91],{"class":63},[57,567,568,570,572,574,577,579,581,583,586],{"class":59,"line":107},[57,569,431],{"class":63},[57,571,434],{"class":70},[57,573,74],{"class":63},[57,575,576],{"class":77},"\"darker\"",[57,578,441],{"class":63},[57,580,444],{"class":70},[57,582,74],{"class":63},[57,584,585],{"class":77},"\"Darker\"",[57,587,452],{"class":63},[57,589,590,592,594,596,598,600,602,604,607],{"class":59,"line":264},[57,591,431],{"class":63},[57,593,434],{"class":70},[57,595,74],{"class":63},[57,597,557],{"class":77},[57,599,441],{"class":63},[57,601,444],{"class":70},[57,603,74],{"class":63},[57,605,606],{"class":77},"\"Normal\"",[57,608,452],{"class":63},[57,610,611,613,615,617,620,622,624,626,629],{"class":59,"line":477},[57,612,431],{"class":63},[57,614,434],{"class":70},[57,616,74],{"class":63},[57,618,619],{"class":77},"\"lighter\"",[57,621,441],{"class":63},[57,623,444],{"class":70},[57,625,74],{"class":63},[57,627,628],{"class":77},"\"Lighter\"",[57,630,498],{"class":63},[57,632,633],{"class":59,"line":501},[57,634,104],{"class":63},[57,636,637],{"class":59,"line":506},[57,638,110],{"class":63},[24,640],{},[27,642,643],{"id":203},"Text",[17,645,646],{},"A plain text field. Can specify a placeholder and default value:",[44,648,650],{"className":46,"code":649,"language":52,"meta":53,"style":53},"{\n    \"name\": \"textSetting\",\n    \"type\": \"text\",\n    \"placeholder\": \"API Key\",\n    \"defaultValue\": \"\"\n}\n",[35,651,652,656,667,678,690,699],{"__ignoreMap":53},[57,653,654],{"class":59,"line":60},[57,655,64],{"class":63},[57,657,658,660,662,665],{"class":59,"line":67},[57,659,71],{"class":70},[57,661,74],{"class":63},[57,663,664],{"class":77},"\"textSetting\"",[57,666,81],{"class":63},[57,668,669,671,673,676],{"class":59,"line":49},[57,670,173],{"class":70},[57,672,74],{"class":63},[57,674,675],{"class":77},"\"text\"",[57,677,81],{"class":63},[57,679,680,683,685,688],{"class":59,"line":50},[57,681,682],{"class":70},"    \"placeholder\"",[57,684,74],{"class":63},[57,686,687],{"class":77},"\"API Key\"",[57,689,81],{"class":63},[57,691,692,694,696],{"class":59,"line":51},[57,693,185],{"class":70},[57,695,74],{"class":63},[57,697,698],{"class":77},"\"\"\n",[57,700,701],{"class":59,"line":107},[57,702,110],{"class":63},[24,704],{},[27,706,708],{"id":707},"textarea","Textarea",[17,710,711],{},"Same as the text field, but allows multiple lines of text. Can specify a placeholder and default value:",[44,713,715],{"className":46,"code":714,"language":52,"meta":53,"style":53},"{\n    \"name\": \"textSetting\",\n    \"type\": \"textarea\",\n    \"placeholder\": \"Quotes\",\n    \"defaultValue\": \"\"\n}\n",[35,716,717,721,731,742,753,761],{"__ignoreMap":53},[57,718,719],{"class":59,"line":60},[57,720,64],{"class":63},[57,722,723,725,727,729],{"class":59,"line":67},[57,724,71],{"class":70},[57,726,74],{"class":63},[57,728,664],{"class":77},[57,730,81],{"class":63},[57,732,733,735,737,740],{"class":59,"line":49},[57,734,173],{"class":70},[57,736,74],{"class":63},[57,738,739],{"class":77},"\"textarea\"",[57,741,81],{"class":63},[57,743,744,746,748,751],{"class":59,"line":50},[57,745,682],{"class":70},[57,747,74],{"class":63},[57,749,750],{"class":77},"\"Quotes\"",[57,752,81],{"class":63},[57,754,755,757,759],{"class":59,"line":51},[57,756,185],{"class":70},[57,758,74],{"class":63},[57,760,698],{"class":77},[57,762,763],{"class":59,"line":107},[57,764,110],{"class":63},[24,766],{},[27,768,770],{"id":769},"button","Button",[17,772,773],{},"A button which can trigger a method on your widget.",[44,775,777],{"className":46,"code":776,"language":52,"meta":53,"style":53},"{\n    \"label\": \"Quote\",\n    \"type\": \"button\",\n    \"description\": \"Changes once a day\",\n    \"buttonLabel\": \"Change Quote\",\n    // Set which method to call on the widget\n    \"onPress\": \"changeQuoteClick\"\n  },\n",[35,778,779,783,795,806,818,830,835,845],{"__ignoreMap":53},[57,780,781],{"class":59,"line":60},[57,782,64],{"class":63},[57,784,785,788,790,793],{"class":59,"line":67},[57,786,787],{"class":70},"    \"label\"",[57,789,74],{"class":63},[57,791,792],{"class":77},"\"Quote\"",[57,794,81],{"class":63},[57,796,797,799,801,804],{"class":59,"line":49},[57,798,173],{"class":70},[57,800,74],{"class":63},[57,802,803],{"class":77},"\"button\"",[57,805,81],{"class":63},[57,807,808,811,813,816],{"class":59,"line":50},[57,809,810],{"class":70},"    \"description\"",[57,812,74],{"class":63},[57,814,815],{"class":77},"\"Changes once a day\"",[57,817,81],{"class":63},[57,819,820,823,825,828],{"class":59,"line":51},[57,821,822],{"class":70},"    \"buttonLabel\"",[57,824,74],{"class":63},[57,826,827],{"class":77},"\"Change Quote\"",[57,829,81],{"class":63},[57,831,832],{"class":59,"line":107},[57,833,834],{"class":97},"    // Set which method to call on the widget\n",[57,836,837,840,842],{"class":59,"line":264},[57,838,839],{"class":70},"    \"onPress\"",[57,841,74],{"class":63},[57,843,844],{"class":77},"\"changeQuoteClick\"\n",[57,846,847],{"class":59,"line":477},[57,848,849],{"class":63},"  },\n",[44,851,853],{"className":129,"code":852,"language":131,"meta":53,"style":53},"{\n    methods: {\n        changeQuoteClick() {\n            // This will be called when the button is pressed\n        }\n    }\n}\n",[35,854,855,859,866,873,878,882,886],{"__ignoreMap":53},[57,856,857],{"class":59,"line":60},[57,858,64],{"class":63},[57,860,861,864],{"class":59,"line":67},[57,862,863],{"class":228},"    methods",[57,865,232],{"class":63},[57,867,868,871],{"class":59,"line":49},[57,869,870],{"class":228},"        changeQuoteClick",[57,872,246],{"class":63},[57,874,875],{"class":59,"line":50},[57,876,877],{"class":97},"            // This will be called when the button is pressed\n",[57,879,880],{"class":59,"line":51},[57,881,256],{"class":63},[57,883,884],{"class":59,"line":107},[57,885,261],{"class":63},[57,887,888],{"class":59,"line":264},[57,889,110],{"class":63},[24,891],{},[27,893,895],{"id":894},"slider","Slider",[17,897,898],{},"Creates a range slider.",[44,900,902],{"className":46,"code":901,"language":52,"meta":53,"style":53},"{\n    \"name\": \"borderRadius\",\n    \"label\": \"Border Radius\",\n    \"type\": \"slider\",\n    \"defaultValue\": \"50\",\n    \"min\": 0,\n    \"max\": 100\n}\n",[35,903,904,908,919,930,941,952,964,974],{"__ignoreMap":53},[57,905,906],{"class":59,"line":60},[57,907,64],{"class":63},[57,909,910,912,914,917],{"class":59,"line":67},[57,911,71],{"class":70},[57,913,74],{"class":63},[57,915,916],{"class":77},"\"borderRadius\"",[57,918,81],{"class":63},[57,920,921,923,925,928],{"class":59,"line":49},[57,922,787],{"class":70},[57,924,74],{"class":63},[57,926,927],{"class":77},"\"Border Radius\"",[57,929,81],{"class":63},[57,931,932,934,936,939],{"class":59,"line":50},[57,933,173],{"class":70},[57,935,74],{"class":63},[57,937,938],{"class":77},"\"slider\"",[57,940,81],{"class":63},[57,942,943,945,947,950],{"class":59,"line":51},[57,944,185],{"class":70},[57,946,74],{"class":63},[57,948,949],{"class":77},"\"50\"",[57,951,81],{"class":63},[57,953,954,957,959,962],{"class":59,"line":107},[57,955,956],{"class":70},"    \"min\"",[57,958,74],{"class":63},[57,960,961],{"class":70},"0",[57,963,81],{"class":63},[57,965,966,969,971],{"class":59,"line":264},[57,967,968],{"class":70},"    \"max\"",[57,970,74],{"class":63},[57,972,973],{"class":70},"100\n",[57,975,976],{"class":59,"line":477},[57,977,110],{"class":63},[24,979],{},[27,981,983],{"id":982},"font","Font",[17,985,986,987,990],{},"Displays a font field that allows the selection of Hologram's included fonts. The default value is ",[35,988,989],{},"Normal",", which resolves to the default system font.",[44,992,994],{"className":46,"code":993,"language":52,"meta":53,"style":53},"{\n    \"name\": \"font\",\n    \"label\": \"Font\",\n    \"type\": \"font\",\n    \"defaultValue\": \"Normal\"\n},\n",[35,995,996,1000,1011,1022,1032,1041],{"__ignoreMap":53},[57,997,998],{"class":59,"line":60},[57,999,64],{"class":63},[57,1001,1002,1004,1006,1009],{"class":59,"line":67},[57,1003,71],{"class":70},[57,1005,74],{"class":63},[57,1007,1008],{"class":77},"\"font\"",[57,1010,81],{"class":63},[57,1012,1013,1015,1017,1020],{"class":59,"line":49},[57,1014,787],{"class":70},[57,1016,74],{"class":63},[57,1018,1019],{"class":77},"\"Font\"",[57,1021,81],{"class":63},[57,1023,1024,1026,1028,1030],{"class":59,"line":50},[57,1025,173],{"class":70},[57,1027,74],{"class":63},[57,1029,1008],{"class":77},[57,1031,81],{"class":63},[57,1033,1034,1036,1038],{"class":59,"line":51},[57,1035,185],{"class":70},[57,1037,74],{"class":63},[57,1039,1040],{"class":77},"\"Normal\"\n",[57,1042,1043],{"class":59,"line":107},[57,1044,1045],{"class":63},"},\n",[17,1047,1048,1049,1052],{},"To set the user's selected font in your widget, add it as a ",[35,1050,1051],{},"style"," property in one of the the ",[1054,1055,1056,1057,1084,1087,1126,1128,1132,1135,1218,1231,1233,1237,1240,1353,1356,1423,1426,1457,1459,1463,1466,1499,1501,1505,1508,1530,1532,1536,1539,1603,1605,1609,1612,1699,1701,1705,1708,1711,1751,1753,1757,1760,1767,1802,1805,1833,1836],"div",{}," elements in your HTML template.",[44,1058,1060],{"className":129,"code":1059,"language":131,"meta":53,"style":53},"style = '{ \\'font-family\\': settings.font }'\n",[35,1061,1062],{"__ignoreMap":53},[57,1063,1064,1067,1070,1073,1076,1079,1081],{"class":59,"line":60},[57,1065,1066],{"class":63},"style ",[57,1068,1069],{"class":242},"=",[57,1071,1072],{"class":77}," '{ ",[57,1074,1075],{"class":70},"\\'",[57,1077,1078],{"class":77},"font-family",[57,1080,1075],{"class":70},[57,1082,1083],{"class":77},": settings.font }'\n",[17,1085,1086],{},"If you want the font choice to be global, put it in your widget's main container div.",[44,1088,1092],{"className":1089,"code":1090,"language":1091,"meta":53,"style":53},"language-html shiki shiki-themes github-dark github-dark","\u003Cdiv class=\"some-class\" :style=\"{'font-family': settings.font}\">\u003C/div>\n","html",[35,1093,1094],{"__ignoreMap":53},[57,1095,1096,1099,1102,1105,1107,1110,1113,1115,1118,1121,1123],{"class":59,"line":60},[57,1097,1098],{"class":63},"\u003C",[57,1100,1054],{"class":1101},"sxg3X",[57,1103,1104],{"class":228}," class",[57,1106,1069],{"class":63},[57,1108,1109],{"class":77},"\"some-class\"",[57,1111,1112],{"class":228}," :style",[57,1114,1069],{"class":63},[57,1116,1117],{"class":77},"\"{'font-family': settings.font}\"",[57,1119,1120],{"class":63},">\u003C/",[57,1122,1054],{"class":1101},[57,1124,1125],{"class":63},">\n",[24,1127],{},[27,1129,1131],{"id":1130},"color-picker","Color Picker",[17,1133,1134],{},"Color picker field type.",[44,1136,1138],{"className":46,"code":1137,"language":52,"meta":53,"style":53},"{\n    \"name\": \"backgroundColor\",\n    \"type\": \"color\",\n    \"defaultValue\": \"#51B8C5\",\n    \"defaultAutoColor\": \"lightvibrant\",\n    // Set whether or not the color picker should show the opacity slider\n    // This is set to true by default so it doesn't need to be explicitly\n    // defined unless you want it off.\n    \"enableOpacity\": true\n}\n",[35,1139,1140,1144,1155,1166,1177,1189,1194,1199,1204,1214],{"__ignoreMap":53},[57,1141,1142],{"class":59,"line":60},[57,1143,64],{"class":63},[57,1145,1146,1148,1150,1153],{"class":59,"line":67},[57,1147,71],{"class":70},[57,1149,74],{"class":63},[57,1151,1152],{"class":77},"\"backgroundColor\"",[57,1154,81],{"class":63},[57,1156,1157,1159,1161,1164],{"class":59,"line":49},[57,1158,173],{"class":70},[57,1160,74],{"class":63},[57,1162,1163],{"class":77},"\"color\"",[57,1165,81],{"class":63},[57,1167,1168,1170,1172,1175],{"class":59,"line":50},[57,1169,185],{"class":70},[57,1171,74],{"class":63},[57,1173,1174],{"class":77},"\"#51B8C5\"",[57,1176,81],{"class":63},[57,1178,1179,1182,1184,1187],{"class":59,"line":51},[57,1180,1181],{"class":70},"    \"defaultAutoColor\"",[57,1183,74],{"class":63},[57,1185,1186],{"class":77},"\"lightvibrant\"",[57,1188,81],{"class":63},[57,1190,1191],{"class":59,"line":107},[57,1192,1193],{"class":97},"    // Set whether or not the color picker should show the opacity slider\n",[57,1195,1196],{"class":59,"line":264},[57,1197,1198],{"class":97},"    // This is set to true by default so it doesn't need to be explicitly\n",[57,1200,1201],{"class":59,"line":477},[57,1202,1203],{"class":97},"    // defined unless you want it off.\n",[57,1205,1206,1209,1211],{"class":59,"line":501},[57,1207,1208],{"class":70},"    \"enableOpacity\"",[57,1210,74],{"class":63},[57,1212,1213],{"class":70},"true\n",[57,1215,1216],{"class":59,"line":506},[57,1217,110],{"class":63},[1219,1220,1222],"alert",{"type":1221},"info",[17,1223,1224,1225,1230],{},"Note: The color settings are described in detail on the ",[1226,1227,1229],"a",{"href":1228},"/docs/developer/widget-color-settings","Widget Color Settings"," page.",[24,1232],{},[27,1234,1236],{"id":1235},"shadow","Shadow",[17,1238,1239],{},"A field that shows slider controls for a shadow.",[44,1241,1243],{"className":46,"code":1242,"language":52,"meta":53,"style":53},"{\n    \"name\": \"shadow\",\n    \"label\": \"Shadow\",\n    \"type\": \"shadow\",\n    // Whether or not the shadow is enabled\n    \"defaultValue\": true,\n    // Default blur amount 0-100\n    \"defaultBlur\": 10,\n    // Default offset 0-100\n    \"defaultOffset\": 5,\n    // Default position 0-360\n    \"defaultPosition\": 0\n}\n",[35,1244,1245,1249,1260,1271,1281,1286,1297,1302,1314,1319,1331,1337,1348],{"__ignoreMap":53},[57,1246,1247],{"class":59,"line":60},[57,1248,64],{"class":63},[57,1250,1251,1253,1255,1258],{"class":59,"line":67},[57,1252,71],{"class":70},[57,1254,74],{"class":63},[57,1256,1257],{"class":77},"\"shadow\"",[57,1259,81],{"class":63},[57,1261,1262,1264,1266,1269],{"class":59,"line":49},[57,1263,787],{"class":70},[57,1265,74],{"class":63},[57,1267,1268],{"class":77},"\"Shadow\"",[57,1270,81],{"class":63},[57,1272,1273,1275,1277,1279],{"class":59,"line":50},[57,1274,173],{"class":70},[57,1276,74],{"class":63},[57,1278,1257],{"class":77},[57,1280,81],{"class":63},[57,1282,1283],{"class":59,"line":51},[57,1284,1285],{"class":97},"    // Whether or not the shadow is enabled\n",[57,1287,1288,1290,1292,1295],{"class":59,"line":107},[57,1289,185],{"class":70},[57,1291,74],{"class":63},[57,1293,1294],{"class":70},"true",[57,1296,81],{"class":63},[57,1298,1299],{"class":59,"line":264},[57,1300,1301],{"class":97},"    // Default blur amount 0-100\n",[57,1303,1304,1307,1309,1312],{"class":59,"line":477},[57,1305,1306],{"class":70},"    \"defaultBlur\"",[57,1308,74],{"class":63},[57,1310,1311],{"class":70},"10",[57,1313,81],{"class":63},[57,1315,1316],{"class":59,"line":501},[57,1317,1318],{"class":97},"    // Default offset 0-100\n",[57,1320,1321,1324,1326,1329],{"class":59,"line":506},[57,1322,1323],{"class":70},"    \"defaultOffset\"",[57,1325,74],{"class":63},[57,1327,1328],{"class":70},"5",[57,1330,81],{"class":63},[57,1332,1334],{"class":59,"line":1333},11,[57,1335,1336],{"class":97},"    // Default position 0-360\n",[57,1338,1340,1343,1345],{"class":59,"line":1339},12,[57,1341,1342],{"class":70},"    \"defaultPosition\"",[57,1344,74],{"class":63},[57,1346,1347],{"class":70},"0\n",[57,1349,1351],{"class":59,"line":1350},13,[57,1352,110],{"class":63},[17,1354,1355],{},"The setting returns an object",[44,1357,1359],{"className":129,"code":1358,"language":131,"meta":53,"style":53},"{\n    enableShadow: true,\n    blur: 10,\n    offset: 5,\n    position: 0,\n    boxShadow: '5px 0px 10px'\n}\n",[35,1360,1361,1365,1376,1387,1398,1409,1419],{"__ignoreMap":53},[57,1362,1363],{"class":59,"line":60},[57,1364,64],{"class":63},[57,1366,1367,1370,1372,1374],{"class":59,"line":67},[57,1368,1369],{"class":228},"    enableShadow",[57,1371,74],{"class":63},[57,1373,1294],{"class":70},[57,1375,81],{"class":63},[57,1377,1378,1381,1383,1385],{"class":59,"line":49},[57,1379,1380],{"class":228},"    blur",[57,1382,74],{"class":63},[57,1384,1311],{"class":70},[57,1386,81],{"class":63},[57,1388,1389,1392,1394,1396],{"class":59,"line":50},[57,1390,1391],{"class":228},"    offset",[57,1393,74],{"class":63},[57,1395,1328],{"class":70},[57,1397,81],{"class":63},[57,1399,1400,1403,1405,1407],{"class":59,"line":51},[57,1401,1402],{"class":228},"    position",[57,1404,74],{"class":63},[57,1406,961],{"class":70},[57,1408,81],{"class":63},[57,1410,1411,1414,1416],{"class":59,"line":107},[57,1412,1413],{"class":228},"    boxShadow",[57,1415,74],{"class":63},[57,1417,1418],{"class":77},"'5px 0px 10px'\n",[57,1420,1421],{"class":59,"line":264},[57,1422,110],{"class":63},[17,1424,1425],{},"In your template you can use it like so:",[44,1427,1429],{"className":1089,"code":1428,"language":1091,"meta":53,"style":53},"\u003Cdiv class=\"container\" :style=\"{'--shadow': this.settings.shadow.boxShadow}\">\u003C/div>\n",[35,1430,1431],{"__ignoreMap":53},[57,1432,1433,1435,1437,1439,1441,1444,1446,1448,1451,1453,1455],{"class":59,"line":60},[57,1434,1098],{"class":63},[57,1436,1054],{"class":1101},[57,1438,1104],{"class":228},[57,1440,1069],{"class":63},[57,1442,1443],{"class":77},"\"container\"",[57,1445,1112],{"class":228},[57,1447,1069],{"class":63},[57,1449,1450],{"class":77},"\"{'--shadow': this.settings.shadow.boxShadow}\"",[57,1452,1120],{"class":63},[57,1454,1054],{"class":1101},[57,1456,1125],{"class":63},[24,1458],{},[27,1460,1462],{"id":1461},"timezone","Timezone",[17,1464,1465],{},"Allows a user to pick a timezone.",[44,1467,1469],{"className":46,"code":1468,"language":52,"meta":53,"style":53},"{\n    \"name\": \"timezone\",\n    \"type\": \"timezone\"\n}\n",[35,1470,1471,1475,1486,1495],{"__ignoreMap":53},[57,1472,1473],{"class":59,"line":60},[57,1474,64],{"class":63},[57,1476,1477,1479,1481,1484],{"class":59,"line":67},[57,1478,71],{"class":70},[57,1480,74],{"class":63},[57,1482,1483],{"class":77},"\"timezone\"",[57,1485,81],{"class":63},[57,1487,1488,1490,1492],{"class":59,"line":49},[57,1489,173],{"class":70},[57,1491,74],{"class":63},[57,1493,1494],{"class":77},"\"timezone\"\n",[57,1496,1497],{"class":59,"line":50},[57,1498,110],{"class":63},[24,1500],{},[27,1502,1504],{"id":1503},"divider","Divider",[17,1506,1507],{},"Adds divider with an optional label.",[44,1509,1511],{"className":46,"code":1510,"language":52,"meta":53,"style":53},"{\n    \"type\": \"divider\"\n}\n",[35,1512,1513,1517,1526],{"__ignoreMap":53},[57,1514,1515],{"class":59,"line":60},[57,1516,64],{"class":63},[57,1518,1519,1521,1523],{"class":59,"line":67},[57,1520,173],{"class":70},[57,1522,74],{"class":63},[57,1524,1525],{"class":77},"\"divider\"\n",[57,1527,1528],{"class":59,"line":49},[57,1529,110],{"class":63},[24,1531],{},[27,1533,1535],{"id":1534},"description","Description",[17,1537,1538],{},"All fieldtypes listed above can optionally contain a field description. Here's an example, using the text field type:",[44,1540,1542],{"className":46,"code":1541,"language":52,"meta":53,"style":53},"{\n    \"name\": \"apiKey\",\n    \"description\": \"Enter your valid API key.\"\n    \"type\": \"text\",\n    \"placeholder\": \"API Key\",\n    \"defaultValue\": \"\"\n}\n",[35,1543,1544,1548,1559,1568,1581,1591,1599],{"__ignoreMap":53},[57,1545,1546],{"class":59,"line":60},[57,1547,64],{"class":63},[57,1549,1550,1552,1554,1557],{"class":59,"line":67},[57,1551,71],{"class":70},[57,1553,74],{"class":63},[57,1555,1556],{"class":77},"\"apiKey\"",[57,1558,81],{"class":63},[57,1560,1561,1563,1565],{"class":59,"line":49},[57,1562,810],{"class":70},[57,1564,74],{"class":63},[57,1566,1567],{"class":77},"\"Enter your valid API key.\"\n",[57,1569,1570,1572,1576,1579],{"class":59,"line":50},[57,1571,173],{"class":77},[57,1573,1575],{"class":1574},"sX7ps",":",[57,1577,1578],{"class":77}," \"text\"",[57,1580,81],{"class":63},[57,1582,1583,1585,1587,1589],{"class":59,"line":51},[57,1584,682],{"class":70},[57,1586,74],{"class":63},[57,1588,687],{"class":77},[57,1590,81],{"class":63},[57,1592,1593,1595,1597],{"class":59,"line":107},[57,1594,185],{"class":70},[57,1596,74],{"class":63},[57,1598,698],{"class":77},[57,1600,1601],{"class":59,"line":264},[57,1602,110],{"class":63},[24,1604],{},[27,1606,1608],{"id":1607},"hidden","Hidden",[17,1610,1611],{},"All fieldtypes listed above can optionally be hidden. Many of the internal interactions with widgets are based on settings, so it can be useful in some situations to define a hidden field. Here's an example of making a select list hidden:",[44,1613,1615],{"className":46,"code":1614,"language":52,"meta":53,"style":53},"{\n    \"name\": \"frequency\",\n    \"type\": \"select\",\n    \"defaultValue\": \"daily\",\n    \"hidden\": true,\n    \"options\": [\n        { \"value\": \"daily\", \"label\": \"Daily\" }\n    ]\n  },\n",[35,1616,1617,1621,1632,1642,1653,1664,1670,1691,1695],{"__ignoreMap":53},[57,1618,1619],{"class":59,"line":60},[57,1620,64],{"class":63},[57,1622,1623,1625,1627,1630],{"class":59,"line":67},[57,1624,71],{"class":70},[57,1626,74],{"class":63},[57,1628,1629],{"class":77},"\"frequency\"",[57,1631,81],{"class":63},[57,1633,1634,1636,1638,1640],{"class":59,"line":49},[57,1635,173],{"class":70},[57,1637,74],{"class":63},[57,1639,406],{"class":77},[57,1641,81],{"class":63},[57,1643,1644,1646,1648,1651],{"class":59,"line":50},[57,1645,185],{"class":70},[57,1647,74],{"class":63},[57,1649,1650],{"class":77},"\"daily\"",[57,1652,81],{"class":63},[57,1654,1655,1658,1660,1662],{"class":59,"line":51},[57,1656,1657],{"class":70},"    \"hidden\"",[57,1659,74],{"class":63},[57,1661,1294],{"class":70},[57,1663,81],{"class":63},[57,1665,1666,1668],{"class":59,"line":107},[57,1667,424],{"class":70},[57,1669,91],{"class":63},[57,1671,1672,1674,1676,1678,1680,1682,1684,1686,1689],{"class":59,"line":264},[57,1673,431],{"class":63},[57,1675,434],{"class":70},[57,1677,74],{"class":63},[57,1679,1650],{"class":77},[57,1681,441],{"class":63},[57,1683,444],{"class":70},[57,1685,74],{"class":63},[57,1687,1688],{"class":77},"\"Daily\"",[57,1690,498],{"class":63},[57,1692,1693],{"class":59,"line":477},[57,1694,104],{"class":63},[57,1696,1697],{"class":59,"line":501},[57,1698,849],{"class":63},[24,1700],{},[27,1702,1704],{"id":1703},"width","Width",[17,1706,1707],{},"You can change the width of fields to to put them next to each other.",[17,1709,1710],{},"The valid widths are: full, two-thirds, half, third",[44,1712,1714],{"className":46,"code":1713,"language":52,"meta":53,"style":53},"{\n    \"name\": \"textSetting\",\n    \"width\": \"half\",\n    // ...\n},\n",[35,1715,1716,1720,1730,1742,1747],{"__ignoreMap":53},[57,1717,1718],{"class":59,"line":60},[57,1719,64],{"class":63},[57,1721,1722,1724,1726,1728],{"class":59,"line":67},[57,1723,71],{"class":70},[57,1725,74],{"class":63},[57,1727,664],{"class":77},[57,1729,81],{"class":63},[57,1731,1732,1735,1737,1740],{"class":59,"line":49},[57,1733,1734],{"class":70},"    \"width\"",[57,1736,74],{"class":63},[57,1738,1739],{"class":77},"\"half\"",[57,1741,81],{"class":63},[57,1743,1744],{"class":59,"line":50},[57,1745,1746],{"class":97},"    // ...\n",[57,1748,1749],{"class":59,"line":51},[57,1750,1045],{"class":63},[24,1752],{},[27,1754,1756],{"id":1755},"hide-when-or-show-when","Hide When or Show When",[17,1758,1759],{},"Sometimes settings are dependent on other settings. For example, let's say you build a clock widget that allows the seconds hand color to be changed, and also allows the hand itself be shown or hidden. Since it makes no sense to allow color changes on a hidden clock hand, you might want the color field to be greyed out when the element is hidden.",[17,1761,1762,1763,1766],{},"Any setting can be hidden by adding a ",[35,1764,1765],{},"hideWhen"," object:",[44,1768,1770],{"className":46,"code":1769,"language":52,"meta":53,"style":53},"\"hideWhen\": [{ \"name\": \"settingsName\", \"valueIs\": [false]}]\n",[35,1771,1772],{"__ignoreMap":53},[57,1773,1774,1777,1780,1783,1785,1788,1790,1793,1796,1799],{"class":59,"line":60},[57,1775,1776],{"class":77},"\"hideWhen\"",[57,1778,1779],{"class":63},": [{ ",[57,1781,1782],{"class":70},"\"name\"",[57,1784,74],{"class":63},[57,1786,1787],{"class":77},"\"settingsName\"",[57,1789,441],{"class":63},[57,1791,1792],{"class":70},"\"valueIs\"",[57,1794,1795],{"class":63},": [",[57,1797,1798],{"class":70},"false",[57,1800,1801],{"class":63},"]}]\n",[17,1803,1804],{},"The inverse is possible too. Sometimes you might want to show an element when a condition is met. In that case you can use:",[44,1806,1808],{"className":46,"code":1807,"language":52,"meta":53,"style":53},"\"showWhen\": [{ \"name\": \"settingsName\", \"valueIs\": [false]}]\n",[35,1809,1810],{"__ignoreMap":53},[57,1811,1812,1815,1817,1819,1821,1823,1825,1827,1829,1831],{"class":59,"line":60},[57,1813,1814],{"class":77},"\"showWhen\"",[57,1816,1779],{"class":63},[57,1818,1782],{"class":70},[57,1820,74],{"class":63},[57,1822,1787],{"class":77},[57,1824,441],{"class":63},[57,1826,1792],{"class":70},[57,1828,1795],{"class":63},[57,1830,1798],{"class":70},[57,1832,1801],{"class":63},[17,1834,1835],{},"Here's an example of how this option is used:",[44,1837,1839],{"className":46,"code":1838,"language":52,"meta":53,"style":53},"{\n    \"name\": \"addVibrance\",\n    \"label\": \"Add Color Vibrance\"\n    \"type\": \"bool\",\n    \"defaultValue\": true\n}\n\n{\n    \"name\": \"vibranceAmount\",\n    \"label\": \"Vibrance Amount\",\n    \"type\": \"slider\",\n    \"defaultValue\": \"50\",\n    \"min\": 0,\n    \"max\": 100,\n    \"hideWhen\": [{ \"name\": \"addVibrance\", \"valueIs\": [false]}]\n}\n",[35,1840,1841,1845,1856,1865,1876,1884,1888,1894,1898,1909,1920,1930,1940,1950,1962,1986],{"__ignoreMap":53},[57,1842,1843],{"class":59,"line":60},[57,1844,64],{"class":63},[57,1846,1847,1849,1851,1854],{"class":59,"line":67},[57,1848,71],{"class":70},[57,1850,74],{"class":63},[57,1852,1853],{"class":77},"\"addVibrance\"",[57,1855,81],{"class":63},[57,1857,1858,1860,1862],{"class":59,"line":49},[57,1859,787],{"class":70},[57,1861,74],{"class":63},[57,1863,1864],{"class":77},"\"Add Color Vibrance\"\n",[57,1866,1867,1869,1871,1874],{"class":59,"line":50},[57,1868,173],{"class":77},[57,1870,1575],{"class":1574},[57,1872,1873],{"class":77}," \"bool\"",[57,1875,81],{"class":63},[57,1877,1878,1880,1882],{"class":59,"line":51},[57,1879,185],{"class":70},[57,1881,74],{"class":63},[57,1883,1213],{"class":70},[57,1885,1886],{"class":59,"line":107},[57,1887,110],{"class":63},[57,1889,1890],{"class":59,"line":264},[57,1891,1893],{"emptyLinePlaceholder":1892},true,"\n",[57,1895,1896],{"class":59,"line":477},[57,1897,64],{"class":63},[57,1899,1900,1902,1904,1907],{"class":59,"line":501},[57,1901,71],{"class":70},[57,1903,74],{"class":63},[57,1905,1906],{"class":77},"\"vibranceAmount\"",[57,1908,81],{"class":63},[57,1910,1911,1913,1915,1918],{"class":59,"line":506},[57,1912,787],{"class":70},[57,1914,74],{"class":63},[57,1916,1917],{"class":77},"\"Vibrance Amount\"",[57,1919,81],{"class":63},[57,1921,1922,1924,1926,1928],{"class":59,"line":1333},[57,1923,173],{"class":70},[57,1925,74],{"class":63},[57,1927,938],{"class":77},[57,1929,81],{"class":63},[57,1931,1932,1934,1936,1938],{"class":59,"line":1339},[57,1933,185],{"class":70},[57,1935,74],{"class":63},[57,1937,949],{"class":77},[57,1939,81],{"class":63},[57,1941,1942,1944,1946,1948],{"class":59,"line":1350},[57,1943,956],{"class":70},[57,1945,74],{"class":63},[57,1947,961],{"class":70},[57,1949,81],{"class":63},[57,1951,1953,1955,1957,1960],{"class":59,"line":1952},14,[57,1954,968],{"class":70},[57,1956,74],{"class":63},[57,1958,1959],{"class":70},"100",[57,1961,81],{"class":63},[57,1963,1965,1968,1970,1972,1974,1976,1978,1980,1982,1984],{"class":59,"line":1964},15,[57,1966,1967],{"class":70},"    \"hideWhen\"",[57,1969,1779],{"class":63},[57,1971,1782],{"class":70},[57,1973,74],{"class":63},[57,1975,1853],{"class":77},[57,1977,441],{"class":63},[57,1979,1792],{"class":70},[57,1981,1795],{"class":63},[57,1983,1798],{"class":70},[57,1985,1801],{"class":63},[57,1987,1989],{"class":59,"line":1988},16,[57,1990,110],{"class":63},[1051,1992,1993],{},"html pre.shiki code .suv1-, html code.shiki .suv1-{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .s8ozJ, html code.shiki .s8ozJ{--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .s4wv1, html code.shiki .s4wv1{--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sFR8T, html code.shiki .sFR8T{--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sOPea, html code.shiki .sOPea{--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .sxg3X, html code.shiki .sxg3X{--shiki-default:#85E89D;--shiki-dark:#85E89D}html pre.shiki code .sX7ps, html code.shiki .sX7ps{--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":53,"searchDepth":67,"depth":67,"links":1995},[1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015],{"id":29,"depth":67,"text":30},{"id":118,"depth":67,"text":119},{"id":210,"depth":67,"text":211},{"id":280,"depth":67,"text":281},{"id":331,"depth":67,"text":332},{"id":373,"depth":67,"text":374},{"id":513,"depth":67,"text":514},{"id":203,"depth":67,"text":643},{"id":707,"depth":67,"text":708},{"id":769,"depth":67,"text":770},{"id":894,"depth":67,"text":895},{"id":982,"depth":67,"text":983},{"id":1130,"depth":67,"text":1131},{"id":1235,"depth":67,"text":1236},{"id":1461,"depth":67,"text":1462},{"id":1503,"depth":67,"text":1504},{"id":1534,"depth":67,"text":1535},{"id":1607,"depth":67,"text":1608},{"id":1703,"depth":67,"text":1704},{"id":1755,"depth":67,"text":1756},"How to define and use widget settings in Hologram widgets.",[2018,2022],{"title":2019,"path":2020,"stem":2021,"children":-1},"Widget Config","/docs/developer/widget-config","docs/developer/03.widget-config",{"title":1229,"path":1228,"stem":2023,"children":-1},"docs/developer/05.widget-color-settings",[2025],{"title":2026,"path":2027,"stem":2028,"children":2029,"navigation":1892},"Welcome to Hologram","/docs","docs/0.index",[2030,2031,2035,2039,2043,2102],{"title":2026,"path":2027,"stem":2028,"navigation":1892},{"title":2032,"path":2033,"stem":2034,"navigation":1892},"Themes & Wallpapers","/docs/themes","docs/1.themes",{"title":2036,"path":2037,"stem":2038,"navigation":1892},"Widgets","/docs/widgets","docs/2.widgets",{"title":2040,"path":2041,"stem":2042,"navigation":1892},"Settings","/docs/settings","docs/4.settings",{"title":2044,"navigation":2045,"sectionTitle":2046,"collapsible":1892,"path":2047,"stem":2048,"children":2049,"page":5},"Developer",{"sectionTitle":2046,"collapsible":1892},"Developing Widgets","/docs/developer","docs/developer",[2050,2054,2060,2061,2063,2064,2068,2072,2076,2080,2086,2090,2094,2098],{"title":2051,"path":2052,"stem":2053,"navigation":1892},"Widget Developer Guide","/docs/developer/guide","docs/developer/01.guide",{"title":2055,"path":2056,"stem":2057,"navigation":2058,"sectionTitle":2059},"Hologram Widget Class","/docs/developer/widget-class","docs/developer/02.widget-class",{"sectionTitle":2059},"Building Widgets",{"title":2019,"path":2020,"stem":2021,"navigation":1892},{"title":8,"path":4,"stem":2062,"navigation":1892},"docs/developer/04.widget-settings",{"title":1229,"path":1228,"stem":2023,"navigation":1892},{"title":2065,"path":2066,"stem":2067,"navigation":1892},"Creating Widget Presets","/docs/developer/widget-presets","docs/developer/06.widget-presets",{"title":2069,"path":2070,"stem":2071,"navigation":1892},"Making Widgets Scale","/docs/developer/making-widgets-scale","docs/developer/07.making-widgets-scale",{"title":2073,"path":2074,"stem":2075,"navigation":1892},"Simple Widget Example","/docs/developer/simple-example","docs/developer/07.simple-example",{"title":2077,"path":2078,"stem":2079,"navigation":1892},"Apple Script","/docs/developer/apple-script","docs/developer/08.apple-script",{"title":2081,"path":2082,"stem":2083,"navigation":2084,"sectionTitle":2085},"Hologram API","/docs/developer/api","docs/developer/10.api",{"sectionTitle":2085},"API Reference",{"title":2087,"path":2088,"stem":2089,"navigation":1892},"Weather","/docs/developer/weather","docs/developer/11.weather",{"title":2091,"path":2092,"stem":2093,"navigation":1892},"Timer","/docs/developer/timer","docs/developer/12.timer",{"title":2095,"path":2096,"stem":2097,"navigation":1892},"Utility Class","/docs/developer/util","docs/developer/13.util",{"title":2099,"path":2100,"stem":2101,"navigation":1892},"Third Party Libraries","/docs/developer/third-party","docs/developer/14.third-party",{"title":2103,"path":2104,"stem":2105,"navigation":2106,"sectionTitle":2107},"Frequently Asked Questions","/docs/faq","docs/faq",{"sectionTitle":2107},"Help",1755585913038]