Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Sample Screen for React Spectrum

ursboller
Community Advisor
Community Advisor

Does anybody have some help on how to create the following UI items within a Firefly app?

  1. Screen with tiles, similar to the Experience Cloud overview screen (as a welcome screen for my app where user can jump to other screens of the app
    ursboller_0-1598010259776.png
  2. table to display data, eg. from a data fetch or from storage, really simple table with header row and some rows with data, something like this
    ursboller_1-1598010333179.png

Thanks in advance for any hints on this topic.

1 Accepted Solution
duypnguyen
Correct answer by
Employee
Employee

Hi @ursboller ,

1. For app layout, you could leverage the Flex and Grid components in React Spectrum.

https://react-spectrum.adobe.com/react-spectrum/layout.html

https://react-spectrum.adobe.com/react-spectrum/Flex.html

https://react-spectrum.adobe.com/react-spectrum/Grid.html

In your case, Flex would be more suitable.

2. For table data, you could use the Table component. Currently it is in alpha release, but you are welcomed to try it out. Please let us know if you have any issue.

https://react-spectrum.adobe.com/releases/2020-08-18.html#released-packages

Sample code: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/stories/Table.sto...

View solution in original post

2 Replies
duypnguyen
Correct answer by
Employee
Employee

Hi @ursboller ,

1. For app layout, you could leverage the Flex and Grid components in React Spectrum.

https://react-spectrum.adobe.com/react-spectrum/layout.html

https://react-spectrum.adobe.com/react-spectrum/Flex.html

https://react-spectrum.adobe.com/react-spectrum/Grid.html

In your case, Flex would be more suitable.

2. For table data, you could use the Table component. Currently it is in alpha release, but you are welcomed to try it out. Please let us know if you have any issue.

https://react-spectrum.adobe.com/releases/2020-08-18.html#released-packages

Sample code: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/stories/Table.sto...

View solution in original post

ursboller
Community Advisor
Community Advisor
thanks a lot for all those links, will give it a try now.