78
Views
7
Comments
grid images
Question

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

mvp_badge
MVP
Rank: #18

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

Rank: #29290

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

mvp_badge
MVP
Rank: #18

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.

Rank: #29290

Hi Daniel,

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

Regards,

Swondary

mvp_badge
MVP
Rank: #18

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
Rank: #29290

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

mvp_badge
MVP
Rank: #18

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