Replacing image dynamically

[former_member829117]

I am new with MDK and having some issues with trying to implement this feature.

I have an image on a section.type.image and want to replace it with an image that is clicked from section.type.imagecollection. I am using odata.readLink/$value to display the images on the section.type.imagecollection and for the section.type.image the image value odata.readLink/$value is passed from a product image being clicked on product details page.

oData version 2.0

Offline App

This is the rule that I have written and has some of the steps I have tried commented out

export default function ImageSelection(clientAPI) {
    const pageProxy = clientAPI.getPageProxy();
    const bindingObject = pageProxy.getActionBinding();
   let imageControl = clientAPI.getPageProxy().getControl('SectionedTable0').getSection('ImageSection0');
let imageVal = bindingObject['@odata.readLink'] + '/$value';
let imageValMedia = "/PracticeV_1/Services/SampleServiceV2.service/" + bindingObject["@odata.mediaReadLink"]
imageControl["@odata.mediaReadLink"] = imageValMedia;
imageControl.binding.PictureUrl = bindingObject.PictureUrl;
//imageControl.binding["@odata.mediaReadLink"] = imageValMedia;
//imageControl.binding["@odata.mediaEditLink"] = imageValMedia;
//imageControl.redraw();
//pageProxy.redraw();
}

here is the modal page with the said metadata

{
    "Caption": "EditProduct_Image",
    "Controls": [
        {
            "Sections": [
                {
                    "_Type": "Section.Type.Image",
                    "_Name": "ImageSection0",
                    "Alignment": "center",
                    
                    "Image": "/PracticeV_1/Services/SampleServiceV2.service/{@odata.readLink}/$value",
                    "ContentMode": "ScaleAspectFit",
                    "Header": {
                        "Caption": "{Name}"
                    }
                },
                {
                    "_Type": "Section.Type.ImageCollection",
                    "_Name": "ImageCollectionSec",
                    "ImageCell": {
                        "Image": "/PracticeV_1/Services/SampleServiceV2.service/{@odata.readLink}/$value",
                        "OnPress": "/PracticeV_1/Rules/ImageEdit/ImageSelection.js"
                    
                    },
                    "Layout": {
                        "LayoutType": "HorizontalScroll"
                    },
                    "Target":{
                        "EntitySet": "Products",
                        "Service": "/PracticeV_1/Services/SampleServiceV2.service",
                         "QueryOptions": "$orderby=Name&$top=16"
                    },
                    "Header": {
                        "Caption": "Select Existing Image"
                    }
                },
                {
                    "_Type": "Section.Type.FormCell",
                    "_Name": "FormSection",
                    "Controls": 
                    [
                        {
                            "_Type": "Control.Type.FormCell.Attachment",
                            "_Name": "Attachment",
                            "AttachmentActionType": [
                                "TakePhoto",
                                "AddPhoto"
                            ]

                        }
                        
                    ],
                    "Header": {
                        "Caption": "Upload Image"
                    }
                }
            ],
            "_Name": "SectionedTable0",
            "_Type": "Control.Type.SectionedTable"
        }
    ],
    "_Name": "EditProduct_Image",
    "_Type": "Page",
    "ActionBar": {
        
        "Items":[
            {
                "_Name": "Cancel",
                "SystemItem": "Cancel",
                "Position": "Left",
                 "OnPress": "/PracticeV_1/Actions/CloseModalPage.action"
            }
        ],
        "_Name": "ActionBar"
    }
}

[bill_froelich · Accepted solution]

The key thing here is that you cannot directly modify the section like you are trying to do in the rule.

You will want to probably need use a rule for the Image property in the image section. This rule will check if you have selected a different image or should display the default image (from the default binding which I assume would be a product detail page).

You logic for determining the new image path reference is fine you just need to store it in a temp location (I would suggest the page level client data) so when you redraw the image section it can get the updated path reference.

You can redraw just the image section using imageControl.redraw(); but keep in mind that the size of the section will not automatically adjust on redraw. This is something we should investigate for a future enhancements. If you want to also have the section size change you will need to redraw the whole page using pageProxy.redraw().