cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Helper III
Helper III

Storing Images from a gallery into columns in SharePoint Online

Hi,

 

I have recently come across a situation in Power Apps, where I have to click images from a camera, display it in a gallery and then store it in n number of columns if there are n images.

 

For eg. I have to capture 3 images of a particular item and then display these 3 in a gallery and then patch it to 3 different columns, say Image1, Image2 and Image 3 in a SharePoint list. Can this be achieved using a single piece of 'Patch 'code. I have an ID that is unique which can be used to patch.

 

Any help will be greatly appreciated.

 

Regards

Srinath 

1 ACCEPTED SOLUTION

Accepted Solutions
Community Support
Community Support

Hi @Srinath :

Do you want to patch the SharePoint list with the images?

Firstly ,I want to explain why you can not patch the image to the SharePoint list.

Since the data source is SharePoint, It is not feasible to update the Picture field with an image file in canvas app.

In addition, you can update Hyperlink field with URI.

Column type

Support

Default cards

Hyperlink

Yes

View URL
View text

Picture

Yes (read-only)

View image
View text

I think this link will help you a lot :

SharePoint/Known issues

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/connections/connection-sharepoint-onlin...

Finally, I have an idea here for your reference:

My Date Source: List A

Title

Single line of text

column1

Hyperlink or Picture

column2

Hyperlink or Picture

column3

Hyperlink or Picture

1\Add a Add picture control(For testing purposes, I use picture control instead of Camera control)

2\Add a button.

OnSelect:

 

Collect(
    MyPics,            /*create a collection to save the  pic*/
    {
        DisplayName: Concatenate(
            "image",
            Text(
                Now(),
                "[$-en-US]yyyy-mm-dd-hh-mm-ss"
            ),
            ".jpg"
        ),
        Value: UploadedImage1.Image,
        AbsoluteUri: "",
        Id: "00000000-0000-0000-0000-000000000000"
    }
)

 

3\Add a Gallery

Items: MyPics

4\Add a Form(Form1)

DefaultMode: FormMode.Edit

DataSource :'List A'

Item: LookUp('List A',ID=1) /* Specify records to update */

set the attachments control’s Items property to: MyPics(Important!Refer to the picture attachment for detailed settings)

aaaa.png

Visible: false /* Make the entire form invisible (beautiful consideration)*/

4\Add a button

OnSelect:

 

SubmitForm(Form1);
Patch(
    'List A',
    LookUp(          /* Specify records to update */
        'List A',
        ID = 1
    ),
    {
        column1: First(
            LookUp(        /* Specify records to update */
                'List A',
                ID = 1  
            ).Attachments
        ).AbsoluteUri/*patch the column1 field with the first pic's URI*/,
        column2: Last(
            FirstN(
                LookUp(      /* Specify records to update */
                    'List A',
                    ID = 1
                ).Attachments,
                2
            )
        ).AbsoluteUri/*patch the column2 field with the second pic's URI*/,
        column3: Last(
            FirstN(
                LookUp(          /* Specify records to update */
                    'List A',
                    ID = 1
                ).Attachments,
                3
            )
        ).AbsoluteUri/*patch the column3 field with the third pic's URI*/
    }
)

 

 

b.jpg

 
 
 

Best Regards,

Bof

View solution in original post

3 REPLIES 3
Super User III
Super User III

Check this video if it can help:
https://youtu.be/2QeOILfo1Bw?t=7

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Community Support
Community Support

Hi @Srinath :

Do you want to patch the SharePoint list with the images?

Firstly ,I want to explain why you can not patch the image to the SharePoint list.

Since the data source is SharePoint, It is not feasible to update the Picture field with an image file in canvas app.

In addition, you can update Hyperlink field with URI.

Column type

Support

Default cards

Hyperlink

Yes

View URL
View text

Picture

Yes (read-only)

View image
View text

I think this link will help you a lot :

SharePoint/Known issues

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/connections/connection-sharepoint-onlin...

Finally, I have an idea here for your reference:

My Date Source: List A

Title

Single line of text

column1

Hyperlink or Picture

column2

Hyperlink or Picture

column3

Hyperlink or Picture

1\Add a Add picture control(For testing purposes, I use picture control instead of Camera control)

2\Add a button.

OnSelect:

 

Collect(
    MyPics,            /*create a collection to save the  pic*/
    {
        DisplayName: Concatenate(
            "image",
            Text(
                Now(),
                "[$-en-US]yyyy-mm-dd-hh-mm-ss"
            ),
            ".jpg"
        ),
        Value: UploadedImage1.Image,
        AbsoluteUri: "",
        Id: "00000000-0000-0000-0000-000000000000"
    }
)

 

3\Add a Gallery

Items: MyPics

4\Add a Form(Form1)

DefaultMode: FormMode.Edit

DataSource :'List A'

Item: LookUp('List A',ID=1) /* Specify records to update */

set the attachments control’s Items property to: MyPics(Important!Refer to the picture attachment for detailed settings)

aaaa.png

Visible: false /* Make the entire form invisible (beautiful consideration)*/

4\Add a button

OnSelect:

 

SubmitForm(Form1);
Patch(
    'List A',
    LookUp(          /* Specify records to update */
        'List A',
        ID = 1
    ),
    {
        column1: First(
            LookUp(        /* Specify records to update */
                'List A',
                ID = 1  
            ).Attachments
        ).AbsoluteUri/*patch the column1 field with the first pic's URI*/,
        column2: Last(
            FirstN(
                LookUp(      /* Specify records to update */
                    'List A',
                    ID = 1
                ).Attachments,
                2
            )
        ).AbsoluteUri/*patch the column2 field with the second pic's URI*/,
        column3: Last(
            FirstN(
                LookUp(          /* Specify records to update */
                    'List A',
                    ID = 1
                ).Attachments,
                3
            )
        ).AbsoluteUri/*patch the column3 field with the third pic's URI*/
    }
)

 

 

b.jpg

 
 
 

Best Regards,

Bof

View solution in original post

Post Patron
Post Patron

@v-bofeng-msft - Regarding this solution, I am using an Add Media Button which produces an image attachment that has the name "UploadedImage1". Unlike your example, I am not using a collection or a form so I just have a Patch() to store the image in a multi-line text column in a SP list, "ShoutoutsData".  How would I leverage your code below in a simple Patch? 

Patch(
    'List A',
    LookUp(          /* Specify records to update */
        'List A',
        ID = 1
    ),
    {
        column1: First(
            LookUp(        /* Specify records to update */
                'List A',
                ID = 1  
            ).Attachments
        ).AbsoluteUri/*patch the column1 field with the first pic's URI*/,
        column2: Last(
            FirstN(
                LookUp(      /* Specify records to update */
                    'List A',
                    ID = 1
                ).Attachments,
                2
            )
        ).AbsoluteUri/*patch the column2 field with the second pic's URI*/,
        column3: Last(
            FirstN(
                LookUp(          /* Specify records to update */
                    'List A',
                    ID = 1
                ).Attachments,
                3
            )
        ).AbsoluteUri/*patch the column3 field with the third pic's URI*/
    }
)

 Currently, I am using the following code which works but storing images this way (i.e., base64) causes issues in the SP list when viewing in a browser so I am interested in implementing your solution instead. 

Patch( ShoutoutsData, Defaults( ShoutoutsData ), { 
    Title: Value(Text(Now(), "[$-en-US]yyyymmddhhmmss")),
    Image: Substitute(JSON(UploadedImage1.Image,JSONFormat.IncludeBinaryData),"""",""), 
} )

 

Helpful resources

Announcements
New Badges

New Solution Badges!

Check out our new profile badges recognizing authored solutions!

New Power Super Users

Congratulations!

We are excited to announce the Power Apps Super Users!

Power Apps Community Call

Power Apps Community Call: February

Did you miss the call? Check out the Power Apps Community Call here.

Microsoft Ignite

Microsoft Ignite

Join digitally, March 2–4, 2021 to explore new tech that's ready to implement. Experience the keynote in mixed reality through AltspaceVR!

Top Solution Authors
Top Kudoed Authors
Users online (30,368)