Display list images inline get from DB

Hi all

I have entity save info of icon are: name,link refer,URL of image

now i want to display all image save on entity to screen inline dynamic and when click image will refer to screen with link refer save on entity of image.

I don't know can be implement it with out systems.

and what widget should I use to implement it?

Thanks

Hi Tung,
Whether you want to achieve this in Web or Mobile Application,
Following are the steps I believe will be useful to create simple list of Image with Information.

1) Create an Aggregate with all the data you want to get into the screen. 

2) Use that Aggregate whether on Preparation or Direct Screen Load(with On After Fetch events if Mobile)
3) Once data is available, drag & drop that aggregate to your screen. It will create List. You can also use a list widget and add all required element from Aggregate as per your need.
4) Make sure you are using Image element for image data from your aggregate.

That's all. It will show you simple default list with all your dynamic data.

You can take a look at following samples and go to details if you find it suitable for your need:
For Mobile: 
https://silkui.outsystems.com/Samples_Mobile.aspx#Mobile_Lists-Samples_CallList
For Web: 
https://silkui.outsystems.com/Samples_Web.aspx#Web_Featured_Explore

Regards

Palak Patel wrote:

Hi Tung,
Whether you want to achieve this in Web or Mobile Application,
Following are the steps I believe will be useful to create simple list of Image with Information.

1) Create an Aggregate with all the data you want to get into the screen. 

2) Use that Aggregate whether on Preparation or Direct Screen Load(with On After Fetch events if Mobile)
3) Once data is available, drag & drop that aggregate to your screen. It will create List. You can also use a list widget and add all required element from Aggregate as per your need.
4) Make sure you are using Image element for image data from your aggregate.

That's all. It will show you simple default list with all your dynamic data.

You can take a look at following samples and go to details if you find it suitable for your need:
For Mobile: 
https://silkui.outsystems.com/Samples_Mobile.aspx#Mobile_Lists-Samples_CallList
For Web: 
https://silkui.outsystems.com/Samples_Web.aspx#Web_Featured_Explore

Regards

Thanks for your suggest

but i did not understand step 3 and 4

when i drag and drop list record(not found Aggregate,this available only at screen create preparation) it gen grid data not list data

so you can help me explain clearly about two step above

Thanks



Hi Tung Nguyen,

If you drag the Entity (from the Data tab) directly onto a screen, it will create a Table Records (List in Mobile) that displays the Entity's data.

It will likely display the URL of the image as text though, so make sure you place an Image widget and set it to use an External source and pass it the URL of the image. If you place Link widget around the Image widget and give it as Destination an External URL, you will be able to pass it as input the URL of the target screen (link refer?). 

Jorge Martins wrote:

Hi Tung Nguyen,

If you drag the Entity (from the Data tab) directly onto a screen, it will create a Table Records (List in Mobile) that displays the Entity's data.

It will likely display the URL of the image as text though, so make sure you place an Image widget and set it to use an External source and pass it the URL of the image. If you place Link widget around the Image widget and give it as Destination an External URL, you will be able to pass it as input the URL of the target screen (link refer?). 

thanks for comment.

but i'm not understand your comment

my requirement is display all image get from DB .i have 2 screen 

screen 1 :setting number icon will display with some info like URL of image icon,url refer when click into image icon

screen 2 :home screen has area display all icon have set at screen 1

and number icon display at screen 2 must mapping number setting at screen 1(add,delete,update)

thanks



Hi Tung Nguyen,

I don't understand what "setting number icon" means for you.

If you have an Entity called IconLink with attributes ImageURL and TargetURL, then showing the list of IconLink records on a screen is quickly achieved by:

  • Drag the IconLink entity (directly from the Data tab of Service Studio) to your Web Screen canvas. This will automatically create an Aggregate in the Preparation, along with a Table Records properly configured.
  • Since you want an image to display per record, and clicking on it should navigate to some other target URL:
    • Drag an Image widget to the Table Records row.
    • Configure the Image source to be External, and provide the <TableRecords name>.List.Current.IconLink.ImageURL attribute as the URL
    • Right click on the Image widget on your canvas and add a Link around it. The Destination should be Common/ExternalURL. Set its URL input parameter to <TableRecords name>.List.Current.IconLink.TargetURL.
  • remove all unnecessary expressions (and columns) from that row.

If you don't want to have one single IconLink per row, switch from a Table Records to a List Records, and make sure its Line Separator property is set to None.

Tung Nguyen,

i want display like bellow

In that case, just follow my advice:

If you don't want to have one single IconLink per row, switch from a Table Records to a List Records, and make sure its Line Separator property is set to None.

After you created your Table Records and you can see it is displaying the icons correctly one per row, just:

  • put a List Records next to the Table Records and copy the property values from one to the other (make sure the Line Separator is set to None);
  • give the Table Records the name IconLinks and the List Records the name IconLinkList;
  • move the contents of the Table Records inside the List Records;
  • delete the Table Records;
  • You will get lots of errors on your Expressions (they are all referring to the Table Records you have just deleted), that you can fix by simply changing the name of your List Records to IconLinks (the name the Table Records had)

Jorge Martins wrote:

Tung Nguyen,

i want display like bellow

In that case, just follow my advice:

If you don't want to have one single IconLink per row, switch from a Table Records to a List Records, and make sure its Line Separator property is set to None.

After you created your Table Records and you can see it is displaying the icons correctly one per row, just:

  • put a List Records next to the Table Records and copy the property values from one to the other (make sure the Line Separator is set to None);
  • give the Table Records the name IconLinks and the List Records the name IconLinkList;
  • move the contents of the Table Records inside the List Records;
  • delete the Table Records;
  • You will get lots of errors on your Expressions (they are all referring to the Table Records you have just deleted), that you can fix by simply changing the name of your List Records to IconLinks (the name the Table Records had)

Hi Jorge Martins

it worked

Thanks so much