Data Sync

About this plugin

Sync your design with API dataFeaturesLoad JSON, XML and CSV from API url or paste as textGoogle sheets URLs are also supportedNavigate your data in a simple interfacePopulate, connect and sync your layers with text and imagesDemohttps://twitter.com/eminsinani/status/1254058106713186304Google sheetsJust paste the URL and your data will loadYou can use the standard URL format shown in the browser: https://docs.google.com/spreadsheets/d/[spreadsheetID]/edit#gid=[tabID]Only sheets with sharing option "anyone with the link" are supportedFirst row will be used as the header rowFormattingBecause data does not always come in the way we want to visualize it, you can format your results before populating. For flexibility the formatting is done using js code where you can use $value as the variable coming from the data. Here are a few examples:John-follower -> $value.split('-')[0] -> John224.50 -> '€ ' + Math.round($value) -> € 225true -> $value ? 'available' : 'occupied' -> available1 -> ['Clear', 'Rain', 'Snow'][$value] -> Rain1988 -> "'" + ($value).toString().substring(2,4) -> '88klm -> `https://airlines.com/${$value}.png` -> https://airlines.com/klm.pngAPI Request OptionsIn the case you need to add request options to your API call, you can do so in a separate field and provide the options as an object. To find out which options are available and how they are named, check out the following library: https://github.com/Jam3/xhr-requestExample usage:{ "headers":{ "secret-key":"XXX" } } NotesYou need to manually select which arrays to loop through after selecting the pathCSV and Google sheet data are always parsed with the first row as a header rowInsecure http calls are not supported, but localhost or http://localhost should work.To multiply layers quickly, install the Multiply pluginIf the amount of layers on your page exceed the limit, the info on the sync page will not auto-refresh when something changes on the page, instead you can use the manual refresh button. This is done to improve performance.WishlistDataset editingColor support (RGB)Component property change supportComponent replacement supportShow/hide layer supportMerge data from different keysAdvanced error messagingFigJam supportSync selectionRefresh connect pageSelect data rangeRandom populate dataSwitch datasets for existing connectionsLet me know in the comments if you have questions, requests or feedback! For detailed questions/debugging please send me a DM on twitter.