Hello Everybody! We hope you’re enjoying the SAP Build Apps Developers Challenge so far. Today, we’d like to change directions and focus on theming and layout design of your app, a very interesting topic that is critical both to “offer” the value of your app and a great User experience (UX) for the users. The app we are going to work with looks like this on the SAP Build Preview App on Mobile device. We will give you a skeleton app and will want you to fix up the UI. This skeleton app will also be used next week, where you’ll learn about native capabilities and connect it to APIs to create an app called NearbyApp using which you can find relaxation/entertainment spots around your locality. The challenges so far: Task 0: Set Up SAP Build Apps Task 1: OData  Task 2: Formulas Task 3: Theming, Styling and Layout Design   (this post)    Task 4: Mobile device capabilities ( full and final one! )                                                                                            To handle the look and feel of your app, there are several concepts you need to understand, as well as several SAP Build Apps tools that we’d like to make sure you are aware of. Theme: A theme is pre-designed template that determines the overall look and feel of an application/app. The purpose of a theme is to create unity across web pages through the consistent use of a color palette, fonts, and layout patterns. When you’re creating your application, you can define once how you want it to look based on your company’s brand or the design guidelines of your project. If you change the main theme, all the components that you’ve used will automatically adapt and follow the guidelines, down to the color system, typography, backgrounds, and more. Theme Tab: This is where you can change themes to the latest SAP Fiori themes. Here it is also possible to adjust colors, theme variables and font settings for the entire theme. Style Tab:  Is used for setting background colors, text colors, typography of text of the UI components like cards, buttons and headings. Style Classes: A style class defines values for all the style properties of a UI component on how it looks: font, colors, borders and so on. You can reuse the same style class to style all the other UI components of same type. For example, once you set the background color and text color for a button, you can save this as a New Style and reuse this style class for the rest of the buttons. This is cool and time efficient – and you will do this for this challenge! Smart Colors: There is a system in the SAP Build apps to take care of the color contrast automatically. Based on the background color, the text color is matched intelligently. For example, for the Brand background which is blue in color, if you set Secondary text which is also blue color, the app intelligently resolves to the text color white to provide a contrast to the text for readability. If you set Neural High Contrast (black) text for the dark mode (black) background, it resolves to white color. Layout Tab: Here you can design the layout of the app, like spaces between components, width and height of the components, position of the components and so forth. In this challenge, you will use it to set the gaps between the buttons. For more information on theming tools, see this blog. For more information on building SAP Fiori apps with SAP Build Apps, see this blog.  👉 Your Task We will give you an app that looks dull, boring and unformatted. Your job is to change its look and feel and make it beautiful! Here are the changes to the Home Page to be made: Here are the changes to the Details page to be made: Download and import your skeleton NearbyApp into your SAP Build Lobby. It’s time to get started with your task! Your Task List To help you get started, here’s a quick example of what you’ll need to do. Open the app and change its theme from SAP Quartz light to SAP Morning Horizon. You can test if the theme is changed in the Web App Preview.  In the UI Canvas, select Page Layout in the tree view (this represents the page), and create a custom background color. To create a custom color, select the current color and choose  New Palette. Make the color Hex value #03093E and call it Deep Blue. In the Home Page UI, select the Card UI component, and give it a background image (Google a cool landscape picture of your location/city landscape). We are curious to see the picture of your location!   Select the Cafes button, and change its background color to Secondary background (in the Universal palette) and change the text color of the Button to ICON (under SAP Morning horizon). Create a new style based on your changes and call it Button Colors. Reuse Button Colors style for the other 3 Buttons Movies, Bars, Restaurants. Select the Large Image List Item, and change its background color to Secondary background. On the Details Page, set the Page Layout background color to Deep Blue. Set all title and text colors to TEXT WHITE. You can create a new style and reuse it for all other components of the same type. Apply the Button Colors Style class created earlier to Check Distance button as well. Back on the home page, select the Cafes button. Under the Layout tab, add horizontal spacing both and left and right side to S-8px. Repeat for all the other buttons. After all your theming and styling, the app should look like this – isn’t it visually appealing and wonderful!? Now showcase your own work!  Switch to Variables and set the initial value of the app variable communityID initial value to your own SAP community ID.  Preview your app, either on Web Preview or on the mobile Preview App, and take 2 screenshots: One of the home page and one of the details page. In your project, go to the Home Page and select Page Layout in the tree view.Under the Style tab, you’ll see the Background Color attribute. If you want to create your own custom color for this background, which menu item do you click from the dropdown? Hint: This menu item has the icon  . The name of the menu item is the string you need to hash. To do the hash, click # Generate Hash in the Navigation bar. Enter your answer in the String to Hash field in all caps with a space between two words, so that if as an example your answer were Create Color, you would hash CREATE COLOR.  4. Post the screenshots and your hash as a reply to this discussion. Great and Congrats! You have now completed Week 3 Developer’s challenge successfully. Next week you will be adding the Logic to this App to find the Activities around your Location by connecting it to a real API and using the location services (GPS) on your mobile. Thank you for taking part in this SAP Build Apps Developer's Challenge!  ... View more

I have recently noticed that (in the AppGyver community edition), while still being marketed in the "launch" tab, you cannot actually deploy your web app to a .appgyverapp.com subdomain. I'm very used to this feature, but have no idea where it has gone and what the status of the feature is.  If you go to the “launch” tab in a community edition app, it says "Create mobile builds of your app for distribution, as well as build web applications to be hosted under the appgyverapp domain. Alternatively, you can download the web build as a ZIP file.”. Does anyone know where this has gone? ... View more

In Task 3 of our challenge, you added theme, styles, and layout design for a new but otherwise empty app. This week, you’ll connect the app to Foursquare APIs and enable native mobile capabilities to end up with an app for finding activities near your area.  You’ll need to have done Task 3 first, or at least download the skeleton app.  The challenges so far:  Task 0: Set Up SAP Build Apps  Task 1: OData   Task 2: Formulas  Task 3: Theming, Styling and Layout Design            Task 4: Mobile device capabilities (this post)  ________________________________________________________________________________ Mobile Device Capabilities in SAP Build Apps  There are few readily available native device capabilities in SAP Build Apps which can be found by invoking the logic canvas from the lower drawer once you click on a control such as a Button.   Scan QR/barcode, Take Photo and GPS Location are native device capabilities provided by SAP Build Apps.  Scan QR/barcode invokes the built-in device camera to scan the QR/barcode values. The output of this flow function is Text content of the scanned QR/barcode. Permissions to access Camera must be provided on the device for this feature to work. This feature works only on mobile devices and is not currently supported on the Web.  Take Photo invokes the built-in device camera to take photos and bring it into Build Apps canvas. The output of this flow function is an object representing the captured photo file in the local filesystem. The object contains the name of the file, path, size of the file in bytes, mimeType, createdAt and modifiedAt. Permissions to access Camera must be provided on the device for this feature to work. This feature works only on mobile devices and is not currently supported on the Web.   GPS location capability outputs an object representing the GPS position of the device when the flow function is called. The object contains latitude, longitude, altitude, accuracy, altitudeAccuracy, direction of heading, speed and timestamp of the device. The location setting on the device/browser must be enabled for this feature to work.   The output from these flow functions can be sent to an API to retrieve more information or for further processing.  In this task, we want you to explore the GPS location (latitude, longitude) capability to find user’s location, send it to Foursquare’s Place Search API to get and display places near the user. You will add logic to the place of interest buttons (Cafes, Movies, Bars, Restaurants) to retrieve the Places Search API response by providing a search query and the latitude and longitude obtained from the GPS Location.      Set Up  Foursquare: Sign up for a foursquare account and get started with the Places API. Skip the “Apply for Movement SDK Access” step as it is not required for this task. Login to your foursquare account, create a project and generate an API key to access Places API as described here. In this task, we will use Place Search API using the Latitude/Longitude as described here.  1.Sign up  2.Login 3. Create Project 4. Generate an API Key   SAP Build Apps: To learn more about how to connect to REST APIs, use page, data, app variables and page parameters used in this task, you can use the references below:  https://community.sap.com/t5/technology-blogs-by-sap/how-to-use-rest-apis-in-sap-build-apps/ba-p/13532439  https://developers.sap.com/tutorials/appgyver-connect-publicapi.html  https://learning.sap.com/learning-journeys/develop-apps-with-sap-build-apps-using-drag-and-drop-simplicity/explaining-the-need-for-variables_b502de2d-7db7-4ee2-8ee1-d282aa7a7c63  Your Task  In Part I, we want you to hook up the app to the Foursquare Place Search API and make it so that when the user clicks one of the buttons, say Cafes, the app will show a list of cafes.   In Part II, we want you to enhance the Details page with Photos and Address received from Get Photos API, Get Place Details API as well as add a custom logic to calculate the user’s distance from the selected place. Part I  The skeleton app already has 2 pages (Homepage and Details page) with a basic structure of the pages. You just need to do the following:  Create a data resource for Foursquare Place Search API. Configure 2 HTTP headers, 4 query parameters on the GET COLLECTION method to get the results from the Foursquare Places Search API.  HTTP headers: Accept and Authorization  Query parameters: query, ll, open_now ( true ), sort ( Distance )  Rest API Direct Integration    Configure REST API  Note: The query and ll query parameters configured for the REST API in the data tab should be non-static, optional value as it will be coming from the Build Apps based on the selection of buttons and latitude/longitude respectively.  Create a data variable to save the response from Place Search API and provide static values for ll and query to populate the list by default (without clicking on any buttons).  Create page variables for latitude and longitude.  Attach flow functions to the buttons (Cafes, Movies, Bars, Restaurants). On Component tap, the flow functions should Pass the query and latitude/longitude in the required format to the Place Search API  Get the response from the API and set it to the data variable  Bind the response from the data variable to the list on the homepage and then map the list elements to fields (icon, name and address) in the response as shown in the screenshot below. The places shown would be different in your list, as the list shows places near the user’s location.    Tips:  Flow functions setup for one button can be copied using Ctrl + C to another button’s logic canvas and pasted using Ctrl + V. Then redo the input/output binding to the functions.  For the icons to display in the list item, combine icon prefix with a size (32, 44, 64, and 88 are available) and add icon suffix, e.g. default64.png using formulas.  You can use browser developer tools network tab to see the REST API query, request headers, query parameters being passed for troubleshooting the API connection.  While creating a data resource, enable and use the GET COLLECTION method when you want to retrieve a list of items (an array) and GET RECORD when you want to retrieve one item (an object) and pass a unique id.   2. Save the solution: Be sure to set your community id as the app variable on this app if it is not already set. Provide the name of the main object that stores the readings such as accelerometer, barometer, compass, geolocation etc. from device sensors, as the value(maintain the case sensitivity) for String to Hash input field on the Generate Hash page and generate a hash. Hint: You can explore this object in the Formula Editor of SAP Build Apps. Take a screenshot of the homepage, save it along with the hash. You might need it to submit later.    Part 2 There is a Details page provided in the skeleton app.  Connect to Get Place Photos API, set the data variable for the page and map the data variable to display all the photos of the venue on the Details page in the placeholder provided for images. Align the images horizontally by making layout changes to the container enclosing the images. In addition to Accept and Authorization headers, you may need to use the URL placeholder field to pass fsq_id ( set as "is optional ") on the GET COLLECTION method to retrieve list of photos. Connect to Get Place Details API, set the data variable for the page and display the name as title and the address of the venue in the placeholders provided on the Details page. In addition to Accept and Authorization headers, you may need to use the URL placeholder field to pass fsq_id ( set as "is optional ") on the GET RECORD method to retrieve details of a specific place. Connect the Details page to the list item on the Homepage so that the Details page of the clicked item displays the photos, address etc. You will be using page parameters to pass the fsq_id and distance from Home page to Details page.  In our app, let's say now we want to implement a custom check in functionality and not use the foursquare APIs. To achieve that, we want to allow customers using the app to be able to “check in“ to the venue, only if they are closer to the venue, for eg: within 5 kms.   Below is a sample reference function that returns true/false based on calculations to determine if the user is near to a location.  For our task, we want to display the distance, a user is from a venue, by clicking the Check distance button. Use formulas in SAP Build Apps to achieve this functionality. Display the distance in km in the placeholder text provided below the button.   function arePointsNearBy(currentLocation, venueLocation, km) { var ky = 40000 / 360; var kx = Math.cos(Math.PI * venueLocation.lat / 180.0) * ky; var dx = Math.abs(venueLocation.lng - currentLocation.lng) * kx; var dy = Math.abs(venueLocation.lat - currentLocation.lat) * ky; return Math.sqrt(dx * dx + dy * dy) <= km; }   To implement the check-in functionality, we could use true/false to determine if we can allow the user to check in. We will not be implementing the check-in functionality as part of this task.  Submit Answer Post a reply with the following:  A screenshot of the Homepage with a list of Cafes near your location along with the hash generated in Part 1.  A screenshot of the Details page of a specific Café showing the distance coming from Foursquare Places Search API and the distance calculated using the calculations in the sample arePointsNearBy function. Ignore any minor differences in the distance as our custom logic uses a different formula compared to the distance coming from Foursquare APIs.  Task 4 – Part 1 output   Task 4 – Part 2 output  If you have reached till here, Nice Work! You have now completed Week 4 of Developer’s challenge successfully.   Thanks for participating and enjoy using the app to search for places of interest! Feel free to add in the comments any improvements you can think of on the app or mention the parts of the exercise you found to be tricky.  ... View more

This post is part of the SAP Build Community Challenge (April 2023) This week’s challenge involves formulas – a key feature of SAP Build Apps. Formulas are used in bindings of components, and enable you to manipulate data before it is displayed in a component or before it is sent to a data source. Formulas are created in the formula editor, which provides some tools for making writing formulas easier: It has a list of functions, which can be added to the formula with a click. It has documentation on each function, plus examples. It has a live testing of functions so you can be certain how they work. It checks the syntax of the formula. It shows an expected sample result of the function. It checks the resulting data type against the data type expected by the component or flow function using the formula. Here are some learning materials about formulas: Formulas (documentation) Formula Functions (reference) No-code App Programming 101 (video by Akseli Virtanen)   Setup We will give you an app that looks like this (I like cats). To set up the challenge, do the following: Download the skeleton project called Challenge - Formulas.zip.gpg. Create a new SAP Build Apps project in your tenant or the sandbox. Import the downloaded file into your new project by selecting History > Replace in the top-right corner, and then selecting the downloaded project.  You should now have the skeleton project. Inside the app, we have already created a page variable called StartValue that contains the starting data that we want you to transform.    The Challenge When you are ready, on the UI Canvas, select the Transform button, open the logic canvas, then select the Set page variable flow function, and finally go to set the formula for Assigned Value on the right (which currently returns an empty list). This is what you need to do: Write a formula that replaces the empty list for the assigned value and that does the following: Aggregates the data from StartValue so that in EndValue each name appears only once with an average calculated from the amount fields. Names should be sorted alphabetically, from A to Z Averages should be rounded to the nearest integer. Launch your app. Click the Transform button (which will display 4 names and an average for each), and then type your name in the input field. Take a screenshot and post it to THIS discussion. BONUS: Add to your entry the movie from where the 4 names in the results are taken. Your screenshot should look something like this but without the blur (I need to see the names and averages) and with your name: Good luck ... and have fun!!   Hint You have to do 3 things in the formula (aggregate/group, sort, round), so find a function that does each one. Use the wonderful editor features that document the available functions. For example, for aggregating, go to the List area, and then find a function that aggregates (in this case, GROUP). You'll see all the documentation for it on the right, plus a little playground inside the documentation for testing it. Pretty cool!    ... View more

Welcome to the SAP Build Apps Community Challenge, a set of small challenges to help you get to know SAP Build Apps a little better, whether you’re a beginner or experienced user. The challenges so far: Task 0: Set Up SAP Build Apps (this post) Task 1: OData  Task 2: Formulas Task 3: Theming, Styling and Layout Design Task 4: Mobile device capabilities If you do all the challenges – each taking the time of your lunch hour (but don’t skip eating lunch 🍜) – you will learn a lot: How to set up SAP Build Apps on your trial account How to import projects How to manage the layout of your app How to create a custom menu, and position it anywhere on the screen How to play sounds in your app How to determine if your app is running on the web or on a device How to call APIs How to filter, sort, and paginate your OData calls to SAP backends How to open an external browser How to embed web pages inside your app How to create a full-page background How to open the phone’s camera from your app (and select back or front camera) How to take pictures with your phone and use them in your app How to store pictures in your app How to create transparency, rounded corners and other visual effects … and a lot more. For every one of the challenges, you will be asked to provide: A hashed GUID from the correct answer (Optional) A screenshot of your app, showing modifications we’ll ask you to make. For these challenges, we will use the hashing service introduced by @qmacro (DJ Adams) for his API challenge back in August. The service lets you take a text string, hash it to a GUID so that we can tell if you were correct but prevent others from seeing the correct answer. GOOD NEWS: In the skeleton app we will give you, we have taken care of the connection to the service, providing an easy way for you to provide your answer. Let’s get started. 👉Your Task Part I – Set Up SAP Build Apps Create a SAP BTP trial account on the US EAST (VA) – AWS region, if you haven’t already. For instructions on setting up an account, see Get a Free Account on SAP BTP Trial. Set up SAP Build Apps on your trial account. Follow this simple 2-minute video: At the end, make sure you can open the SAP Build lobby. Install the SAP Build Apps preview app on your mobile phone/device. iOS App Android App Installing the app is simple – just search for SAP Build Apps Preview. But for more help watch this 2-minute video: Make sure to give this app permission to use your device's camera. REMINDER: With the trial, you will be on the US10 landscape and must log in on the preview app using Other login options.   Part II Next, you will have some fun and make sure everything is connected, and get a little preview of some of the capabilities of SAP Build Apps. If you want to review the basics of building apps with SAP Build Apps works, feel free to watch the SAP Build Apps playlist (new videos all the time). Download our fun little app. You will use this app for the next 3 challenges.  Upload the project to SAP Build Apps and open it (you can import projects in the lobby). Inside the project, go to the app variables and set the initial value for the CommunityID to your community ID. This ID enables you to hash your text answers so the GUID you submit is unique to you, and allows us to check that you got it right. Go to the Launch tab: If you have an iOS device, run the app in the SAP Build Apps Preview App on your device – not on your laptop. If you have an Android device, run the the app on the web preview. Using the app, take a picture (iOS) or upload a picture (Android). Either way, click Add My Picture. Take a screenshot (showing your picture and community ID). Find on the app a place to tap so that a hidden message is revealed. Use the force to find it. This is the secret message you will need to hash and will automatically be saved for you once you find it. Go to the Submit page by clicking the hash icon. Here, the secret phrase and your community ID were already entered (though you can always enter them manually). Click Hash. Reply to this discussion thread and post the hash you received, followed by the screenshot. To make things simpler, we've provided a button to open this post in the app (though you can make the reply via a browser). The post with a screenshot should look something like this:   Bonus Tasks If you're looking for more to do and learn: Bonus #1: We have embedded a secret piece of music on the home page. You do not have to post anything about it – just enjoy. (Tap again to stop the music.) Open the project to see how we did this. Bonus #2: Make any improvement you want to the app, for example: You could add a toggle which will change whether the app opens the front or back camera (for this, check the properties for the flow function that opens the camera). Notice how when you stop the music, and then restart it, the music starts from the beginning. You could instead pause the music and make it start exactly where it left off, but how? [HINT: Read about the audio flow functions.] Share your innovation. Feel free to look inside the app to see how we put it all together – how we made it so it will store your community ID, how you could have entered your community ID in the app instead of hard-coding it, how we created a circle with your image, how we played music, how we ran the hashing function – all without coding. ... View more

Now the challenge gets real 😯 I’ve heard that many developers – citizen and otherwise -- pretty much understand the idea of formulas, and can modify existing formulas and create basic formulas. But even those around SAP Build Apps for a while still struggle to come up with complex formulas from scratch. This challenge will take you to the next level. The challenges so far: Task 0: Set Up SAP Build Apps Task 1: OData  Task 2: Formulas (this post) Task 3: Theming, Styling and Layout Design Task 4: Mobile device capabilities The Real Purpose of Formulas Essentially, formulas are a way to transform data – to convert data to a different data type, to aggregate, to reduce, to format. So given that, we need to first understand the different “types” of data.   Type of Data Before beginning, it helps to know the basics of the JSON format, a text-based data interchange format. There are plenty of sites for learning JSON, such as this one: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON   Despite it looking complicated, essentially, all the data you deal with will be one of the following: Primitive: String, number, Boolean, null     "My string" 100 True null     Object: A single collection of fields, each of which is a primitive, list or another object     {a: “My String”, b: 100, c: True} {a: 100, b: {c: “subobject”} } {a: 100, b: [1, "Two", { x: 3 } ]}     Lists: A set of primitives, objects or (sub)-lists     [1, 2, 3, 4, 5, 6] [ {salesOrderID: 1234, NetAmount: 100.33}, {salesOrderID: 9999, NetAmount: 3240.99} ] [1, [2, 3], 4, "five", 6, {"next": 7} ]     These 3 “types” can be combined in all sorts of ways to get interesting data, but essentially that’s all there is.   Tools for Transforming Data The formula editor is the tool you use to build formulas. Inside here, you have many functions to transform data from one type to another. For example, you search for functions that work on lists – these functions will take lists and transform them in some way. Take the MAP function. The documentation inside the formula editor is very good – it will provide a very good explanation of what the function does, with examples that you can actually modify and see how the function works. The description tells you what type of data you start with and what type you end up with. Here, for MAP, it says it takes a list, and returns a list, but the contents of the list are transformed. Or take SUM, which takes a list of numbers and returns a number.. Any function can be thought of this way: What type of data does it take, and what type of data does it return.   Strategy for Formulas (Example) When you need to transform data, you should know what you are starting with and what you want to end up with, then figure out the intermediary steps for the transformation. Finally you have to find the functions that can do the type of transformations you need. For example, let’s say you want to configure a dropdown list so the user can select a number that is in the range of 1 to some number, and that number is stored in a page variable.     pageVars.options     But the dropdown control needs a list of objects in this format:     [ {label: "1", value: "1"}, {label: "2", value: "2"}, {label: "3", value: "3"} ]     So, you need to come up with a strategy for transforming the primitive into a list of objects. Here’s one way to do this, step by step. Since you need a list, you can use the GENERATE_RANGE function to transform the single number (primitive) to a list of numbers:     GENERATE_RANGE(1, pageVars.options)     This gets you this result.     [1,2,3,4,5]     But instead of a list of primitives, you need a list of objects. So you can use the MAP function to transform the items in the list -- because you know the MAP function transforms from one type of list to another type of list.     MAP(GENERATE_RANGE(1, pageVars.options),{label: item, value: item })     MAP iterates over your original list, and provides you the variable item that holds the current item in the list. This gets you this result.     [ {label: 1, value: 1}, {label: 2, value: 2} ]     But the label and value fields must be provided as strings, so you will do another transformation, changing one type of primitive to another type of primitive. Here, you can use the STRING function to transform a number to a string.     MAP(GENERATE_RANGE(1, pageVars.options),{label: STRING(item), value: STRING(item)})     This gets you this result, which is what you need for your dropdown list.     [ {label: "1", value: "1"}, {label: "2", value: "2"}, {label: "3", value: "3"}, {label: "4", value: "4"}, {label: "5", value: "5"} ]       Your Task Part I Using the app you worked on from Task 1, change the pagination so it returns 20 items per page. Then add a button with the text Sum of Top 20. When the user taps the button, set the stringToHash app variable using a formula to the sum of the 20 items in your data variable, and format the sum with a dollar sign, commas, and 2 decimal places, no spaces (there is a function that does this for you). Your number should look something like this (your amount will differ):     $123,456.99     Go to the Submit page, hash the string. NOTE: If you need help with the formula, just take it one step at a time, and see the formula editor for all the formulas you can use. If needed, post in this thread for assistance.   Part II You will use another formula, but this time to chart the data. Go to the Marketplace by clicking on Marketplace at the top of the UI components. Take some time to explore all the cool components (and flow functions) available. Find the pie chart component and install it. Just below the button, add a container, make it white, and then add a pie chart to the container. At this point it should look like this, since you have no data: Now you will set the data for the pie chart with a formula. Go to the Chart data property of the pie chart and create a formula to display the top 6 sales order items. Use: Material for the display text NetAmount for the data value It should look something like this (your data will be different): 👉When you are done, take a screenshot, reply to this thread, and post the hash from Part I, and the screenshot Part II. Feel free to share your formulas. ... View more

Always good to brush up on your OData access … I mean, we’re at SAP. We started the challenge earlier this week with a preliminary task so you can have your SAP Build Apps set up. Now we'll start one challenge a week, on Wednesdays – today's about working with S/4HANA Cloud OData services. The challenges so far: Task 0: Set Up SAP Build Apps Task 1: OData (this post) Task 2: Formulas  Task 3: Theming, Styling and Layout Design Task 4: Mobile device capabilities Getting data from SAP backends is one of the key capabilities of SAP Build Apps, and one of the things you’ll want to make sure is second nature for you. To get SAP backend data into your app, you’ll need to know a few things. SAP Accelerator Hub: A set of demo SAP services – e.g., S/4HANA, SuccessFactors, Ariba – you can use for building your apps.  Destinations: To access APIs, SAP BTP lets you define connections to backend data in the form of destinations – basically, a set of parameters including URL / authentication info. Data Resources: This is an SAP Build Apps object that defines which data – e.g., which service, entity, filtering – we want for our app. Data Variables: This is an SAP Build Apps object that actually makes the backend call and sets aside space for the retrieved data. Within the data variable there is a way to filter, sort, and paginate the data that you retrieve from the backend. For more on these tasks, you can see this blog.  In this challenge, you will get demo sales order data, filter/sort/paginate the data, and display the data in your app. 👉Your Task To do this task, you'll need an SAP Build Apps system and to import our skeleton app. To do all this, make sure you've done Task 0. Part I Create a destination to the Sales Order v4 OData service on the SAP Business Accelerator Hub. You will have to create an account on the SAP Business Accelerator Hub, and have access to an API key (free). To do all this, there is a 2-minute video: IMPORTANT: When you create your destination, the URL should be: https://sandbox.api.sap.com/s4hanacloud/sap/opu/odata/sap/API_SALES_ORDER_SRV YOU'LL LIKE THIS: We have given you a file you can import to create the destination in a few seconds. You just have to add your API key. In your app project from the last challenge, make a data resource to this destination, and enable the A_SalesOrderItem entity. Open the S/4HANA Sales Orders page in the app we gave you, and create a data variable based on the data resource you created. IMPORTANT: In the data variable, you MUST implement sorting/filtering/paging  as follows: Only return records where IncoTermsLocation1 = Palo Alto. Sort by the net amount, showing the largest amounts first. Show only the first 10 records. Now make the UI by dragging a List Item control onto the canvas, and show the following 2 fields: SalesOrderItemText Net Amount To make it look nice, I changed the width and height for the list item component, using the Custom setting and setting the width to 90%. I also changed the shape. You can adjust the UI as you like. Run the app in the SAP Build Apps preview app or web preview, and navigate to the S/4HANA Sales Orders (use the custom menu at the bottom of the home page). Take a screenshot, something like this (your values will differ and MUST reflect the filtering above).   Take note of the amount for the 10th entry – this is the value you must hash (remember, your values will be different than the one's above). The value should be with 2 decimal places, no commas and no currency sign, something like this: 123.99.  Go to the Submit page by clicking the hash icon next to your community ID. Make sure your Community ID is entered properly. Enter the amount for the string to hash.  Click Hash, and now enter the hash and your screenshot as a reply to this thread. Your entry should look like this: Part II Open your app in the mobile preview and tap somewhere on the S/4HANA Sales Order page reveal a 30-second video about an event the SAP Developer Advocates put on around the world (a second tap will hide the video). Type the name of the event in your reply.  ... View more

Hello there, I am encountering an issue with Part 8 of the SAP Build Code Jam and cannot wrap my head around the error I encounter. I was able to complete Part 7 and test the Process I created, it worked well. I then went on creating the action for fetching the business partner by number (created the Destination for it before, using the Destination Definition from the sap-build GitHub). I tested the action and it worked well :  I then went on to amend the Process with the newly created action Added the action, amended the condition of BPGroup, updated the inputs of the Approval Form with values coming from the action. I proceeded then to update the Build App itself, adding a page variable to the Cart view, associated it with the Dropdown BP, updated the Purchase button logic (the part of the Create Record) with the BP Page Variable.  I then test the application and check the Process in the Monitoring section, where I run into this error :  Have any of you encountered similar issues? I also tried modifying the Destinations of the S4 HANA by adding "TrustAll" - True property, instead of having the "Use default JDK truststore" checkbox checked (I encountered issue with this also on the "April (Citizen) Developer Challenge".   ... View more

People always want full OData filtering (and other OData manipulations) in SAP Build Apps. But the filtering is severely limited for most people (see this recent question). The Potential Solution Currently, there is no way to do a lot of the filtering OData provides, like Contains or Ends With and things like that. To "solve" this, I used the REST data resource with destinations, instead of the OData integration. I admit you lose a lot of the advantages of the OData data resource – interpretation of the metadata, selecting all the entities, filtering/paging/ordering, and even converting the response. All that has to be done manually. Still, I was able to filter and I thought perhaps it might help someone. Here's what I did. I created a data resource of type "SAP BTP destination REST API integration" using a destination to the Northwind OData service. I enabled the list action, and set it's path to a formula. query.search.query I then created a data variable (collection of records), and in the logic of the data variable, set the Get record collection's Search parameter. Inside there is just query field, and I set this to the entity I wanted plus any filtering, such as: /Customers?$filter=contains(CustomerID, 'AL') The only other thing I had to do is, when setting the data variable from the output, I used a formula to remove the OData header: outputs["Get record collection"].records.value Because the OData response adds a header and my REST data resource does not handle this. And it seemed to work:   My Challenge to You OK, this is just something I threw together in response to a question in the community. But: Is it helpful to anyone? Can you improve on it? Are there fatal limitations to it? Is there a better solution? Leave your comments below. ... View more

Gerei atualizações para minhas aplicações na versão runtime 4.9.218 e os campos de data ou agendamento estão completamente em branco, impossibilitando a seleção da data Este bug não ocorre na versão preview, apenas na versão compilada Isso será corrigido na próxima versão do tempo de execução? Nota: acontece em todas as versões do iOS ... View more