https://github.com/tcorral/widget-agnostic-transactions-list

A widget to show transactions list without any dependency.
https://github.com/tcorral/widget-agnostic-transactions-list

Last synced: 6 days ago
JSON representation

A widget to show transactions list without any dependency.

• Host: GitHub
• URL: https://github.com/tcorral/widget-agnostic-transactions-list
• Owner: tcorral
• License: apache-2.0
• Created: 2015-12-09T10:57:24.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-11T15:49:14.000Z (almost 9 years ago)
• Last Synced: 2024-04-13T09:19:47.291Z (7 months ago)
• Language: CSS
• Size: 726 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# widget-agnostic-transactions-list

This repository will show how to create a transactions list widget without any dependency but CXP 5.6 platform.

## Index

* Start with an empty repository.

* Explain how to import the widget in CXP. 

* Create the minimum structure to import your widget to the editor.

* Modify the markup to show a 'Hello World' message.

* Modify the markup to show a list of items.

	* Each item will contain:

		* Date:

			* Month name, only three characters. i.e. 'Dec' -> 'December'

			* Day of the month, two characters. i.e '09', '10'

		* Description:

			* The description of the transaction.

		* Amount:

			* Two decimals. i.e. 40 -> 40.00

			* Currency sign. i.e. 40 -> $40.00

			* Payment transactions. i.e. 40 -> -$40.00

* Fill the list from Javascript using fake data.

* Fill the list from Javascript using XHR to fetch the data from a file with fake data.

* Improve the markup to be easily styled from the theme.

	* **Styles in widget should only be used for scaffolding**

* Create a new theme for our portal.

* **Style our list to look as the Transactions List Screenshot.**

  ![Transactions List](./readme-media/transactions-list-screenshot.png "Transactions List Screenshot")

### Section

#### Style our list to look as the Transactions List Screenshot.

Check the ```training-content/training-theme/styles/theme.less``` file to see a solution.