--- title: "Enter the playground! Discover how to use the Settings API to customize your app :)" description: "Today, we're going to have a look to some deep features that you can use to customize your app a lot more! It can be a little technical to manage, but that's wo" canonical_url: "https://www.goodbarber.com/blog/enter-the-playground-discover-how-to-use-the-settings-api-to-customize-your-app-a324/" lang: en date: 2014-01-08 last_updated: 2019-04-27 --- # Enter the playground! Discover how to use the Settings API to customize your app :) ![](https://blog.goodbarber.com/_public/profile/ca/ca3512f4dfa95a03169c5a670a4c91a19b3077b4-default.jpg) [Dumè Siacci](https://www.goodbarber.com/blog/author/dominique-siacci/)CTO Jan 8, 2014 · Updated Apr 27, 2019 · 4 min read ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/6201767-9265491.jpg?v=1389031463.629942) Today, we're going to have a look to some **deep features** that you can use to **customize your app** a lot more! It can be a little technical to manage, but that's worth it. You may have noticed a section of the backoffice called **Settings API**. Trust me, that's where the best features are hidden ;) *Looking for a complete guide? Check out the tutorial "[How to make an app](https://blog.goodbarber.com/how-to-make-an-app/) "!* ## What's the Settings API exactly? ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/6201767-9265492.jpg?v=1389031340.0142374) The **Settings API** allows you to access several settings that are not available in the GoodBarber backend. You can access the Settings API in the **Design > Developer** menu. It's an option, billed 4€/month or 40€/year (or $ depending on your country). Of course, you can test the option for free during 15 days before purchasing it. The full documentation of the attributes that can be modified using the Settings API is available in the **Help Center > Developers > JSON Formats** menu. Here are some **examples** of modifications that can be done using the Settings API. All the examples below are made on a **single section**: if you want to apply the modifications to several sections, you need to repeat the operation on each section. ## Enable the "Save to library" option in Photo sections This features allows your users to **save a picture** from a **Photo** section into their phone's library, with a **long tap** on the picture in the detail page of the section. To enable this option, you need to set the sections/[]/saveImgEnabled to 1 in the Settings API. If the attribute doesn't exist, you need to add it. ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/6201767-9265505.jpg?v=1389030956.0332458) ## Change the detail page display in Article and Video sections You can modify the **layout** of the detail page in the **Article** or the **Video** section by modifying the sections/[]/detail/htmlTemplate attribute. If it doesn't exist, the default setting will be used. Add a new attribute to override the default setting. This attribute works with **tokens** (available tokens are listed below). *Example:* if you want to remove the author's name into the detail page, you need to be sure that the [AUTHOR] token is removed from the htmlTemplate. ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/6201767-9265512.jpg?v=1389030940.7499683) ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/6201767-9265516.jpg?v=1389030985.531024) Template for **Article** sections: ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/6201767-9265517.jpg?v=1389030997.3290637) Template for **Video** sections: ## Modify the tokens used in list of articles or videos If you want to display another information, as **subtitles,** into the lists of content (by default it's "Author on Date"), you can modify the sections/[]/infosContentType attribute. As usual, it works with **tokens**. *Example:* in this video, I remove the author's name, and I choose to use another date formatting. ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/6201767-9265528.jpg?v=1389031127.7940416) ## Change the way the pager is diplayed in the header of the Photo sections In the detail page of the **Photo** section, the header shows a pager ("1 / 24" by default). You can change the format of this string by modifying the sections/[]/detail/pager attribute. The tokens that can be used in the case are **[CURRENT]** and **[TOTAL]**. *Example:* in the video, I change the display from "10 / 24" to "10 of 24". ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/6201767-9265532.jpg?v=1389031177.0330772) ## Available tokens - **[TITLE]** : Title of the article / video - **[DATE]** : Date of publication, in the default format - **[HOUR]** : Hour of publication - **[AUTHOR]** : Author of the article / video - **[CONTENT]** : Full content (description) of the article / video - **[EMBEDHTML]** : HTML embed code of the video (used only in the detail page of the video sections) - **[DURATION]** : Duration of the video (used only in video sections) - **[VIEWS]** : Views of the video (used only in video sections) - **[ADDRESS]** : Address of the event (used only in event sections) - **[NBCOMMENTS]** : Number of comments in the items - **[CURRENT]** : Position of the picture in the list (used only in photo sections) - **[TOTAL]** : Total number of pictures in the list (used only in photo sections) - **[URL_ITEM]** : URL of the item on its source ## Available date format tokens The date format of the **[DATE]** token can vary regarding the language of your app, but it's always a **short date style** ("01/03/2014"). You can use these tokens instead of [DATE] to display **another date format**. - **[DATETXT1]** : Monday, January 6th 2014 - **[DATETXT2]** : January 6th 2014 - **[DATETXT3]** : Monday, January 6th - **[DATETXT4]** : 01/06/2014 - **[DATETXT5]** : 01/06 - **[DATETXT6]** : 01/2014 - **[DATETXT7]** : January 2014 - **[DATETXT8]** : January 6th ## And so on! We'd love to see how you can **hack** your GoodBarber app design using the Settings API. **Share** you tips & tricks in the comments! :) - [#Features](https://www.goodbarber.com/blog/tags/features/) - [#SettingAPI](https://www.goodbarber.com/blog/tags/settingapi/) - [#Tips](https://www.goodbarber.com/blog/tags/tips/) ![](https://blog.goodbarber.com/_public/profile/ca/ca3512f4dfa95a03169c5a670a4c91a19b3077b4-default.jpg) About the author Dominique Siacci CTO Co-founder and CTO of GoodBarber. I drive the product's technical vision: architecture, infrastructure, and more recently the integration of AI at the core of the platform. A developer at heart, I stay close to the code and the engineering decisions that enable thousands of GoodBarber users to publish their apps without writing a single line of code. [More from Dominique](https://www.goodbarber.com/blog/author/dominique-siacci/)[LinkedIn](https://fr.linkedin.com/in/dsiacci/)[X](https://twitter.com/dsiacci)[Facebook](https://www.facebook.com/dsiacci)