Adding Custom Fields to Web GUI for HTML

Adding Custom Fields to Web GUI for HTML

Explanation Screenshot

To learn more about

how a power user
adds a custom field
to Web GUI for
HTML, follow this
interactive tutorial.

1. To open the app,

select the Custom
Fields and Logic tile.

2. To add a new field,

choose the Plus icon.

1
Adding Custom Fields to Web GUI for HTML

Explanation Screenshot

3. Open the Business

Context list.

4. Select the scroll

bar to scroll down.

5. Select Sales:
Sales Document.

2
Adding Custom Fields to Web GUI for HTML

Explanation Screenshot

6. In the Label field,

enter Tutorial1 and
press Enter.

7. Open the Type list.

8. Select Text.

3
Adding Custom Fields to Web GUI for HTML

Explanation Screenshot

9. Choose Create
and Edit.

10. Choose UIs and

Reports.

11. Choose Enable

Usage for the newly
created data source
SD_SALESDOC_GU
I.

4
Adding Custom Fields to Web GUI for HTML

Explanation Screenshot

12. Choose Save.

13. Choose Publish.

14. In the Search

field, enter Tutorial1
and press Enter.

5
Adding Custom Fields to Web GUI for HTML

Explanation Screenshot

15. The new custom

field is published.

To return to the
launchpad, choose
SAP.

16. To open the app,

select the Display
Sales Orders tile.

17. In the Order field,

enter 1 and press
Enter.

6
Adding Custom Fields to Web GUI for HTML

Explanation Screenshot

18. Choose Search.

19. Choose Display

Header Details.

20. Choose Custom

Fields.

7
Adding Custom Fields to Web GUI for HTML

Explanation Screenshot

21. Select the scroll

bar to scroll down.

The new custom field

is added to the Web
GUI for HTML.

22. To return to the

launchpad, choose
SAP.

8
Adding Custom Fields to Web GUI for HTML

Explanation Screenshot

You have
successfully added a
custom field to Web
GUI for HTML.

This concludes the

interactive tutorial.