{"id":2537,"date":"2014-03-30T18:29:19","date_gmt":"2014-03-30T17:29:19","guid":{"rendered":"http:\/\/www.hackingsap.com\/blog\/?p=2537"},"modified":"2014-03-30T18:29:19","modified_gmt":"2014-03-30T17:29:19","slug":"diy-css-navigation-buttons-in-sap-design-studio","status":"publish","type":"post","link":"https:\/\/www.hackingsap.com\/blog\/diy-css-navigation-buttons-in-sap-design-studio","title":{"rendered":"DIY CSS navigation buttons in SAP Design Studio"},"content":{"rendered":"<p>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.<\/p>\n<p>You can use the standard button components, but these have a pretty basic look. In this example I will show you how to create your own custom navigation buttons with some CSS code and a tiny bit of JavaScript.<\/p>\n<p>We will create two buttons. The button for the selected page should have a blue color, the unselected button should be white. Also, when the user hovers the unselected button with the cursor, the button should turn blue.<\/p>\n<div style=\"width: 320px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-2537-1\" width=\"320\" height=\"240\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/www.hackingsap.com\/blog\/wp-content\/uploads\/cssnav.mp4?_=1\" \/><a href=\"http:\/\/www.hackingsap.com\/blog\/wp-content\/uploads\/cssnav.mp4\">http:\/\/www.hackingsap.com\/blog\/wp-content\/uploads\/cssnav.mp4<\/a><\/video><\/div>\n<p>For this we need three CSS statements. You can add these to your custom CSS file:<\/p>\n<ul>\n<li>.button_show<\/li>\n<li>.button_show:hover<\/li>\n<li>.button_selected<!--more--><\/li>\n<\/ul>\n<p>There are <a href=\"http:\/\/www.bestcssbuttongenerator.com\/\" target=\"_blank\">several websites available<\/a> that can help you to create CSS buttons, but you can also use my CSS code and tweak it. Most important here are the colors, which differ between the show and selected versions, and the border radius since I like the looks of the buttons better that way.<\/p>\n<pre>.button_show {\r\n background-color:#ffffff;\r\n -moz-border-radius:4px;\r\n -webkit-border-radius:4px;\r\n border-radius:4px;\r\n border:1px solid #005092;\r\n display:inline-block;\r\n cursor:pointer;\r\n color:#005092;\r\n font-family:arial;\r\n font-size:12px;\r\n text-align:center;\r\n font-weight:bold;\r\n padding:2px 2px;\r\n text-decoration:none;\r\n }<\/pre>\n<\/p>\n<pre>\r\n.button_show:hover {\r\n background-color:#005092;\r\n color:#ffffff;\r\n }\r\n\r\n.button_selected {\r\n background-color:#005092;\r\n -moz-border-radius:4px;\r\n -webkit-border-radius:4px;\r\n border-radius:4px;\r\n border:1px solid #005092;\r\n display:inline-block;\r\n cursor:pointer;\r\n color:#ffffff;\r\n font-family:arial;\r\n font-size:12px;\r\n text-align:center;\r\n font-weight:bold;\r\n padding:2px 2px;\r\n text-decoration:none;\r\n }<\/pre>\n<p>\nNow add two Text components to the Design Studio app and name them BUTTON_1 and BUTTON_2. Also add a Pagebook component.<\/p>\n<p><a href=\"http:\/\/www.hackingsap.com\/blog\/wp-content\/uploads\/cssnav2.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"cssnav2\" src=\"http:\/\/www.hackingsap.com\/blog\/wp-content\/uploads\/cssnav2.png\" width=\"268\" height=\"266\" \/><\/a><\/p>\n<p>Write the following script to BUTTON_1 On Click script editor:<\/p>\n<pre>PAGEBOOK_1.setSelectedPageIndex(0);\r\nBUTTON_1.setCSSClass(\"button_selected\");\r\nBUTTON_2.setCSSClass(\"button_show\");<\/pre>\n<p>And use the next script for BUTTON_2:<\/p>\n<pre>PAGEBOOK_1.setSelectedPageIndex(1);\r\nBUTTON_1.setCSSClass(\"button_show\");\r\nBUTTON_2.setCSSClass(\"button_selected\");<\/pre>\n<p>As you can see these scripts switch the pages of the Pagebook component, but also change the CSS class of the buttons. Don&#8217;t forget to set the initial CSS class in the properties of the Text components: button_selected for BUTTON_1 and button_show for BUTTON_2.<\/p>\n<p><a href=\"http:\/\/www.hackingsap.com\/blog\/wp-content\/uploads\/cssnav1.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"cssnav1\" src=\"http:\/\/www.hackingsap.com\/blog\/wp-content\/uploads\/cssnav1.png\" width=\"312\" height=\"256\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 button components, but these have [&hellip;]<\/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":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[21,163],"tags":[176,164],"class_list":["post-2537","post","type-post","status-publish","format-standard","hentry","category-diy","category-sap-businessobjects-design-studio","tag-css","tag-design-studio"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pKaa2-EV","jetpack-related-posts":[{"id":2314,"url":"https:\/\/www.hackingsap.com\/blog\/getting-started-with-design-studio-book-now-available-coupon-code-in-post","url_meta":{"origin":2537,"position":0},"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 &quot;Books&quot;","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":[]},{"id":2572,"url":"https:\/\/www.hackingsap.com\/blog\/sap-design-studio-custom-scrollbars-css","url_meta":{"origin":2537,"position":1},"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 &quot;DIY&quot;","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":2938,"url":"https:\/\/www.hackingsap.com\/blog\/a-look-at-design-studio-1-6-integrated-css-editor","url_meta":{"origin":2537,"position":2},"title":"A look at Design Studio 1.6: Integrated CSS editor","author":"Xavier Hacking","date":"November 29, 2015","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;SAP BusinessObjects Design Studio&quot;","block_context":{"text":"SAP BusinessObjects Design Studio","link":"https:\/\/www.hackingsap.com\/blog\/category\/sap-businessobjects-design-studio"},"img":{"alt_text":"dscss1","src":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/dscss1.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":2537,"position":3},"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 &quot;SAP BusinessObjects Design Studio&quot;","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":459,"url":"https:\/\/www.hackingsap.com\/blog\/xcelsius-using-the-push-button-for-data-input","url_meta":{"origin":2537,"position":4},"title":"Xcelsius: Using the Push Button for data input","author":"Xavier Hacking","date":"May 8, 2010","format":false,"excerpt":"How to use the push button for data input into your Xcelsius what-if scenario dashboard.","rel":"","context":"In &quot;DIY&quot;","block_context":{"text":"DIY","link":"https:\/\/www.hackingsap.com\/blog\/category\/diy"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/xcelsiusplusmin1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2871,"url":"https:\/\/www.hackingsap.com\/blog\/design-studio-1-5-preview","url_meta":{"origin":2537,"position":5},"title":"Design Studio 1.5 Preview","author":"Xavier Hacking","date":"May 16, 2015","format":false,"excerpt":"Later this quarter the next big\u00a0SAP BusinessObjects\u00a0Design Studio update will be generally available: version 1.5. Let's have a look at what we can expect in this edition. Performance, performance, performance Despite the fact that\u00a0Design Studio is\u00a0developed in\u00a0a much more future proof way than\u00a0SAP BusinessObjects Dashboards (Xcelsius), it still appears to\u2026","rel":"","context":"In &quot;Preview&quot;","block_context":{"text":"Preview","link":"https:\/\/www.hackingsap.com\/blog\/category\/preview"},"img":{"alt_text":"Design-Studio-1.5-3","src":"https:\/\/i0.wp.com\/www.hackingsap.com\/blog\/wp-content\/uploads\/Design-Studio-1.5-3.png?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\/2537","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=2537"}],"version-history":[{"count":14,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/posts\/2537\/revisions"}],"predecessor-version":[{"id":2557,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/posts\/2537\/revisions\/2557"}],"wp:attachment":[{"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/media?parent=2537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/categories?post=2537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hackingsap.com\/blog\/wp-json\/wp\/v2\/tags?post=2537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}