Hi Team,

I have a requirement , user should select a image which will be displayed in a grid inside the application. 

steps:

1) click on upload pic 

2) user will be navigated to another screen with a grid of pictures.

3)they must select one among that

4)then the picture will be viewed in upload screen 

5)save the picture and send id to back end

tell me a solution to implement the same.


Regards,

Sowndarya

Hi Sowndarya,

So what did you try sofar to get this implemented in OutSystems, on what particular problem you stumble on you need help?

Regards,

Daniel

Hi Daniel,

I tried to keep a upload widget on one page but it does not take me to a different screen , rather navigates outside the application. Also i could take a picture from one screen to another.

Need possible ways to achieve this requirement.


Regards,

Sowndarya

The File Upload widget allows you to upload a file from your local computer. 

It is not designed to display a grid of images to choose from.

Where are the pictures stored that you want to display in a grid? Is it in an OutSystems table?

You have to try and give a more detailed description of what you try to achieve to let us help you more efficiently.

Hi Daniel,

Thanks for you reply .Find the pictorial representation of my requirement. 

Regards,

Swondary

Still this generates all kind of questions as still your story is open for interpretation

screen 1:

  • With Add Image, do you only mean you want to navigate to screen 2?, or
  • Do you want to select an image from your computer with the upload widget?

screen 2:

  • Where are all the other images coming from from the grid of images?
    • from outsystems entity?
  • if there is an image added in step 1 does it need to be visible in the grid, then 
    • in screen 1 you could add it to the table images
    • navigate to screen 2
    • in preperation of screen 2 just get all images and show them in a grid.

screen 3:

  • asuming screen 2 is a grid of images, then wrap the image widget in a link widget to navigate to screen 3 with the image id
  • in screen 3 you can get the image data from the entity by id

Hi Daniel,

Find the below inputs for your queries,

  • With Add Image, do you only mean you want to navigate to screen 2?, or

yes, should navigate to next screen

  • Do you want to select an image from your computer with the upload widget?

No, need to select a image from grid inside the application in a different screen.

  • Where are all the other images coming from from the grid of images?
    • from outsystems entity?

Yes, i have created a outsystems entity with few images

  • if there is an image added in step 1 does it need to be visible in the grid, then 
    • in screen 1 you could add it to the table images
    • navigate to screen 2
    • in preperation of screen 2 just get all images and show them in a grid.

No, on clicking the add image in screen 1 , it should navigate to screen 2 and then fetch an image from grid  then display in screen 1


Regards,

Sowndarya

Ok something like this maybe?

Lets assume your entity is called Image.

On Screen 1

  1. Add Non-mandatory Input parameter ImageId.
  2. In Preperation add Aggregate GetImageById to try to get the Image using the ImageId input parameter
  3. Make a link or button "Add Image" and wrap it in a link with destination Screen 2
  4. Add an Image widget and show the image from the aggregate
  5. Wrap the Image in an If with not GetImageById.List.Empty

On Screen 2

  1. Get all records from Image by dragging the entity into the preperation.
  2. Add Gallery widget to the screen
    https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Structure/Gallery\\
  3. Assign the Aggregate from the preperation to the ListRecords within the Gallery
  4. Add a Image Widget within the ListRecord of the Gallery
  5. Wrap the image widget in  a link widget with destination screen 1 and pass the Id of the image