{"id":2938,"date":"2015-11-29T17:10:54","date_gmt":"2015-11-29T16:10:54","guid":{"rendered":"http:\/\/www.hackingsap.com\/blog\/?p=2938"},"modified":"2015-11-29T17:10:54","modified_gmt":"2015-11-29T16:10:54","slug":"a-look-at-design-studio-1-6-integrated-css-editor","status":"publish","type":"post","link":"https:\/\/www.hackingsap.com\/blog\/a-look-at-design-studio-1-6-integrated-css-editor","title":{"rendered":"A look at Design Studio 1.6: Integrated CSS editor"},"content":{"rendered":"

SAP BusinessObjects\u00a0Design Studio 1.6<\/strong> has just been released, so it is time to really check out the new features myself! I’ll start with one of the more hidden features in the previews\/roadmaps, but in my opinion a very imported productivity gainer: the integrated custom CSS-file editor<\/strong>.<\/p>\n

Using a custom CSS-file in Design Studio was pretty frustrating. You had to edit the file in a tool like Notepad++ and upload it to the BI Platform via the Application’s properties; a lot of repeating manual steps. Let’s have a look at how SAP improved this in this update.<\/p>\n

Design Studio 1.6 has a new button\u00a0Edit Custom CSS…<\/strong> in the menu bar.<\/p>\n

\"dscss1\"<\/a><\/p>\n

After clicking this button a CSS-file can be selected from the BI Platform, or a new (empty) CSS-file can be created on the BI Platform.<\/p>\n

\"dscss2\"<\/a><\/p>\n

The CSS-file opens in a new tab<\/strong>. Just as with the\u00a0Design Studio apps, the asterisk (*) sign before the file name indicates that the file\u00a0has been changed and hasn\u2019t been saved yet. Here we can define the custom CSS classes. As you can see in the screenshots below, the editor supports syntax coloring\/formatting: comments are italic and blue, class names are green,\u00a0\u00a0properties are purple, property values are italic and blue etc.<\/p>\n

Also, just as in the Script Editor for JavaScript we can use the CTRL-SPACE<\/strong> shortcut to show proposals for CSS properties and values. This will increase development speed, as less errors will be made searching for the correct syntax and less checking of the W3Schools CSS reference<\/a> is necessary.<\/p>\n

In the examples below I activated the content assistance after typing\u00a0font\u00a0<\/strong>and\u00a0font-weight<\/strong>.<\/p>\n

\"dscss3\"<\/a>\u00a0\"dscss4\"<\/a><\/p>\n

The Properties Panel<\/strong> is also available for the custom CSS-file. You can click on a class name in the CSS-file and all available properties are shown and values are entered. So instead of typing the properties yourself in the CSS-file, you can also just fill in the Properties Panel for a CSS class. In the example below I selected class\u00a0label1<\/strong>.<\/p>\n

\"dscss6\"<\/a><\/p>\n

In case of syntax errors<\/strong> a red box is shown in front of the line of code with the error in it.<\/p>\n

\"dscss8\"<\/p>\n

Unfortunately in the Properties Panel of a\u00a0Design Studio component you still have to enter the CSS classes yourself. There is no option to select them from a list\/dropdown menu.<\/p>\n

\"dscss5\"<\/p>\n

After making a change to the CSS-file and saving it\u00a0the\u00a0Design Studio app updates immediately and uses the new version of the CSS classes.<\/p>\n

\"dscss7\"<\/p>\n","protected":false},"excerpt":{"rendered":"

SAP BusinessObjects\u00a0Design Studio 1.6 has just been released, so it is time to really check out the new features myself! I’ll start with one of the more hidden features in the previews\/roadmaps, but in my opinion a very imported productivity gainer: the integrated custom CSS-file editor. Using a custom CSS-file in Design Studio was pretty […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[163],"tags":[176],"class_list":["post-2938","post","type-post","status-publish","format-standard","hentry","category-sap-businessobjects-design-studio","tag-css"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pKaa2-Lo","jetpack-related-posts":[{"id":2971,"url":"https:\/\/www.hackingsap.com\/blog\/sap-businessobjects-design-studio-the-comprehensive-guide-2nd-edition-coming-early-2016","url_meta":{"origin":2938,"position":0},"title":"SAP BusinessObjects Design Studio: The Comprehensive Guide (2nd edition) coming early 2016","author":"Xavier Hacking","date":"December 29, 2015","format":false,"excerpt":"SAP\u00a0Design Studio has changed and improved a lot over the past three years; arriving at version 1.6 last month. It was clear that our\u00a02013 book Getting Started with\u00a0SAP BusinessObjects\u00a0Design Studio needed a big update, as it included only the features up until Design Studio version 1.1. So the wait is\u2026","rel":"","context":"In "Books"","block_context":{"text":"Books","link":"https:\/\/www.hackingsap.com\/blog\/category\/books"},"img":{"alt_text":"design_studio_boek2_2","src":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/design_studio_boek2_2-221x300.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2905,"url":"https:\/\/www.hackingsap.com\/blog\/sap-businessobjects-design-studio-1-6-preview","url_meta":{"origin":2938,"position":1},"title":"SAP BusinessObjects Design Studio 1.6 Preview","author":"Xavier Hacking","date":"October 29, 2015","format":false,"excerpt":"SAP BusinessObjects\u00a0Design Studio 1.6 is coming up later this quarter so it is time to do a little previewing! You can find the full roadmap for\u00a0Design Studio here. Below I'll discuss the highlights of all the new features that we can expect. New Scorecard component Design Studio 1.6 brings a\u2026","rel":"","context":"In "SAP BusinessObjects Design Studio"","block_context":{"text":"SAP BusinessObjects Design Studio","link":"https:\/\/www.hackingsap.com\/blog\/category\/sap-businessobjects-design-studio"},"img":{"alt_text":"ds16_1","src":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/ds16_1-1024x618.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/ds16_1-1024x618.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/ds16_1-1024x618.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/ds16_1-1024x618.png?resize=700%2C400 2x"},"classes":[]},{"id":2537,"url":"https:\/\/www.hackingsap.com\/blog\/diy-css-navigation-buttons-in-sap-design-studio","url_meta":{"origin":2938,"position":2},"title":"DIY CSS navigation buttons in SAP Design Studio","author":"Xavier Hacking","date":"March 30, 2014","format":false,"excerpt":"In SAP BusinessObjects Design Studio you can use the container components like a Tabstrip or a Pagebook to organize your application. The Tabstrip component already includes the tabs for navigation between the pages. For the Pagebook component we have to create our own navigation buttons. You can use the standard\u2026","rel":"","context":"In "DIY"","block_context":{"text":"DIY","link":"https:\/\/www.hackingsap.com\/blog\/category\/diy"},"img":{"alt_text":"cssnav2","src":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/cssnav2.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2588,"url":"https:\/\/www.hackingsap.com\/blog\/new-sapexperts-article-how-to-use-css-in-design-studio","url_meta":{"origin":2938,"position":3},"title":"New SAPexperts article: How to Use CSS in Design Studio","author":"Xavier Hacking","date":"May 1, 2014","format":false,"excerpt":"I wrote another article for the SAPexperts online knowledge base. In line with some of my recent posts here on my blog this one is all about CSS, but now more from a basic, 101 course standpoint. In this article I give a basic introduction to the language of CSS\u2026","rel":"","context":"In "Knowledge sharing"","block_context":{"text":"Knowledge sharing","link":"https:\/\/www.hackingsap.com\/blog\/category\/knowledge-sharing"},"img":{"alt_text":"sapexperts_bihub","src":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/sapexperts_bihub.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2572,"url":"https:\/\/www.hackingsap.com\/blog\/sap-design-studio-custom-scrollbars-css","url_meta":{"origin":2938,"position":4},"title":"Custom Scrollbars in SAP Design Studio","author":"Xavier Hacking","date":"April 26, 2014","format":false,"excerpt":"As we have seen in an earlier post we can enhance the looks of our SAP BusinessObjects Design Studio applications with the use of some CSS coding. In this post I will show you how to add scrollbars to Design Studio components and how to change the looks of them.\u2026","rel":"","context":"In "DIY"","block_context":{"text":"DIY","link":"https:\/\/www.hackingsap.com\/blog\/category\/diy"},"img":{"alt_text":"scollbar1","src":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/scollbar1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2314,"url":"https:\/\/www.hackingsap.com\/blog\/getting-started-with-design-studio-book-now-available-coupon-code-in-post","url_meta":{"origin":2938,"position":5},"title":"Getting Started with Design Studio book now available (coupon code in post!)","author":"Xavier Hacking","date":"November 14, 2013","format":false,"excerpt":"Getting Started with\u00a0SAP BusinessObjects\u00a0Design Studio is available for order right now! If you haven't picked it up at the SAP Press book stand at SAP TechEd Las Vegas or Amsterdam you can get your copy now at SAP-Press.com. Make sure you use coupon code\u00a0QR7N5G when finishing your order, which will\u2026","rel":"","context":"In "Books"","block_context":{"text":"Books","link":"https:\/\/www.hackingsap.com\/blog\/category\/books"},"img":{"alt_text":"DesignStudioCover","src":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/DesignStudioCover-288x300.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/posts\/2938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/comments?post=2938"}],"version-history":[{"count":3,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/posts\/2938\/revisions"}],"predecessor-version":[{"id":2949,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/posts\/2938\/revisions\/2949"}],"wp:attachment":[{"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/media?parent=2938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/categories?post=2938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/tags?post=2938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}