The mobile development kit (MDK) is a feature of SAP Cloud Platform Mobile Services. With each new release, mobile development kit visualizes new iOS SDK Controls in the mobile development kit editor.
One of the new controls is the image collection control. This control manages and displays a set of images with titles in a grid-like arrangement, which you can configure in different layout types.
The Image Collection control is a great way to display a product catalog or featured items. In this blog, I provide details on this control and how to create a product catalog preview based on the Sample Service. You will also get to use the rule editor to remove text from the PictureUrl. I consider this a bonus as we do not yet have a lot of content covering the different things you can do with the rule editor. This will change.
I've also created a video for the SAP Technology channel on YouTube showing how to use the control. Check back for a link from this blog once my video is public.
Developers can add an image collection that can be circular or square. You can define the height and whether you want it to horizontal scroll, horizontal fit, or vertical. You can set a target so that when an image is clicked on, it navigates to more details about that image. This is a great option for product images or a catalog of items.
Title: Title text displayed on each cell, such as product name
Target: map the OData Entity Set to be used to populate the data in the cells
Image: Image to be displayed for a specific record
ImageisCircular: When set to True, the image is displayed in a circular shape.
Image Height: Height of the image to be displayed
Image Width: Width of the image to be displayed
Layout Type: Set the layout for the catalog
Minimum Interim Spacing: minimum spacing between two items. Default is 20px
Minimum Line Spacing: minimum space between two lines when set to vertical. Default is 20px
Caption: Displayed label of the image collection item
Create a section page and drag the Image Collection control onto the page.
Click on the Image Collection and set the properties
In the Object Browser, set the Query Options to $top=10 to limit the results for this featured preview to the top 10 product results.
Create a Rule
Now, create a rule called ProductImagePath to place in the image field.
Mobile Services uses relative paths for the images in the Sample Service rather than saving the image to the back end. Mobile development kit cannot discern the full path from a relative path, so for the Sample Service, we will create a rule to remove the relative path and just keep the image name. I have attached the images at the end of this blog and you can add them to your local client.
Note: If your back end stores the product images, you don’t need to do a rule like this, you can just add the image like any other data from the back end. However, one of the benefits of this is that you get experience of the type of things you can do with the rule editor.
In the rule, create a new variable called ImagePath.
Drag the set clientAPI to block over to the rule and change clientAPI to imagePath.
Expand Text -> Values and grab the quote block and drag that over to the rule and place to the right of the previous block added. Type res:// to start the path to access the images locally.
Expand Text -> Simple again and select the to item append text block and drag it under the set block. Change item to imagePath.
Now, I need to remove the relative URL path and only keep the image name. I’ll drag the in text remove block located under Text -> Advanced and drag it to the right of the to append text block.
The in text remove block allows us to grab the relative path text from the PictureUrl data from the SampleService back end and remove parts of it.
Drag the clientAPI block over to the rule and set the binding to evaluateTargetPath. This is located under ClientAPIs.
Now, from the same section, I’ll drag the Object Browser and place it inside the clientAPI -> evaluateTargetPath block. I’ll open up the Object Browser and grab the PictureUrl from the backend.
Now, I’m going to specify what text to remove from the URL. I am removing the entire relative path before the image name. When I go to SAP Cloud Platform Mobile Services. I go to the Sample Service and click on view data for the Products collection. In the XML, I searched for .png and copy the path before the image name - /SampleServices/ESPM.svc/resources/images/. I will put this as the text to remove.
Now I will tell the rule that this is not case sensitive from the very beginning.
Now, drag the imagePath variable to the right of the return section of the rule.
The rule is now complete and I can add the rule to the image property field for my Catalog Preview.
Go back to the CatalogPreview page. Open up the Object Browser for the Image property field. Find the rule to grab the image name.
Drop Images into the MDK Client
Now, grab these images here and drop them into your MDK client. Extract into <yourmdkproject>.mdkproject -> AppResources -> iOS and rerun your create-client.command.
Let’s take a look at the finished application. I have a Catalog Preview in my application that shows the product images and name below.
Some bonus additions you can add on your own
One additional note: I posted a video on YouTube about the Contact Cell Table. You can leverage this exact same rule to add images to that control as well.
One of the new controls is the image collection control. This control manages and displays a set of images with titles in a grid-like arrangement, which you can configure in different layout types.
The Image Collection control is a great way to display a product catalog or featured items. In this blog, I provide details on this control and how to create a product catalog preview based on the Sample Service. You will also get to use the rule editor to remove text from the PictureUrl. I consider this a bonus as we do not yet have a lot of content covering the different things you can do with the rule editor. This will change.
I've also created a video for the SAP Technology channel on YouTube showing how to use the control. Check back for a link from this blog once my video is public.
Developers can add an image collection that can be circular or square. You can define the height and whether you want it to horizontal scroll, horizontal fit, or vertical. You can set a target so that when an image is clicked on, it navigates to more details about that image. This is a great option for product images or a catalog of items.
Image Collection Properties
Title: Title text displayed on each cell, such as product name
Target: map the OData Entity Set to be used to populate the data in the cells
Image: Image to be displayed for a specific record
ImageisCircular: When set to True, the image is displayed in a circular shape.
Image Height: Height of the image to be displayed
Image Width: Width of the image to be displayed
Layout Type: Set the layout for the catalog
- HorizontalFit
- HorizontalScroll
- Vertical
Minimum Interim Spacing: minimum spacing between two items. Default is 20px
Minimum Line Spacing: minimum space between two lines when set to vertical. Default is 20px
Caption: Displayed label of the image collection item
Building a Product Catalog Preview
Create a section page and drag the Image Collection control onto the page.
Click on the Image Collection and set the properties
- Target: Products collection
In the Object Browser, set the Query Options to $top=10 to limit the results for this featured preview to the top 10 product results.
- Image: [we will come back to this one. ]
- Title: Name
- Leave the defaults for ImageHeight, Image Width, Minimum Line Spacing, and MinimumInteritem Spacing
- LayoutType: HorizontalScroll or HorizontalFit
Create a Rule
Now, create a rule called ProductImagePath to place in the image field.
Mobile Services uses relative paths for the images in the Sample Service rather than saving the image to the back end. Mobile development kit cannot discern the full path from a relative path, so for the Sample Service, we will create a rule to remove the relative path and just keep the image name. I have attached the images at the end of this blog and you can add them to your local client.
Note: If your back end stores the product images, you don’t need to do a rule like this, you can just add the image like any other data from the back end. However, one of the benefits of this is that you get experience of the type of things you can do with the rule editor.
In the rule, create a new variable called ImagePath.
Drag the set clientAPI to block over to the rule and change clientAPI to imagePath.
Expand Text -> Values and grab the quote block and drag that over to the rule and place to the right of the previous block added. Type res:// to start the path to access the images locally.
Expand Text -> Simple again and select the to item append text block and drag it under the set block. Change item to imagePath.
Now, I need to remove the relative URL path and only keep the image name. I’ll drag the in text remove block located under Text -> Advanced and drag it to the right of the to append text block.
The in text remove block allows us to grab the relative path text from the PictureUrl data from the SampleService back end and remove parts of it.
Drag the clientAPI block over to the rule and set the binding to evaluateTargetPath. This is located under ClientAPIs.
Now, from the same section, I’ll drag the Object Browser and place it inside the clientAPI -> evaluateTargetPath block. I’ll open up the Object Browser and grab the PictureUrl from the backend.
Now, I’m going to specify what text to remove from the URL. I am removing the entire relative path before the image name. When I go to SAP Cloud Platform Mobile Services. I go to the Sample Service and click on view data for the Products collection. In the XML, I searched for .png and copy the path before the image name - /SampleServices/ESPM.svc/resources/images/. I will put this as the text to remove.
Now I will tell the rule that this is not case sensitive from the very beginning.
Now, drag the imagePath variable to the right of the return section of the rule.
The rule is now complete and I can add the rule to the image property field for my Catalog Preview.
Go back to the CatalogPreview page. Open up the Object Browser for the Image property field. Find the rule to grab the image name.
Drop Images into the MDK Client
Now, grab these images here and drop them into your MDK client. Extract into <yourmdkproject>.mdkproject -> AppResources -> iOS and rerun your create-client.command.
Let’s take a look at the finished application. I have a Catalog Preview in my application that shows the product images and name below.
Some bonus additions you can add on your own
- Add a section header above the catalog preview to label and separate it from other sections
- Add a section footer below the image collection and label it See All and set the navigation to the pull product Catalog page.
- Create a Product Catalog page that has the same image collection, but don’t limit the list to the top 10 and set the LayoutType to Vertical to display all the products available.
- You can also create a Product Detail page and link from the Product Catalog to the Product Detail for that product.
One additional note: I posted a video on YouTube about the Contact Cell Table. You can leverage this exact same rule to add images to that control as well.
- SAP Managed Tags:
