Action Icons

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Sunday, February 5, 2017PrintSubscribe
Action Icons

Adding relevant icons to actions helps the user locate and understand the purpose of that action.

Custom icons on actions.

Let’s add an action to Orders page of the sample Northwind app that will mark an order as shipped. This action will have a custom icon.

Switch back to the Project Designer. In the Project Explorer, right-click on “Orders / Actions / ag2 (Form)” and press New Action.

Adding a new action to Orders controller.

Icons can be defined by specifying the icon library and the icon name. Spaces are replaced with dashes.

Apply the following properties to the new action.

Property Value
Command Name Custom
Command Argument ShipOrder
When Client Script $row.ShippedDate == null
Icon / Custom Style material-icon-local-shipping

Press OK to save the new action.

Let’s add the action to the grid as well. Right-click on the new action, and press Copy.

Copying the action.

Right-click on “Orders / Actions / ag1 (Grid” and press Paste.

Pasting an action onto action group "ag1".

On the toolbar, press Browse and navigate to the Orders page. Press the three dot menu next to any record. The “Ship Order” action will now be present in the context menu, with the specified icon. The action is also available on the sidebar.

The "Ship Order" action shows a custom icon.

Opening the form will display the action at the bottom of the form. Icons are not displayed on the form action bar. Activating the context menu will display the icon next to the “Ship Order” action.

Custom icon is displayed next to the form action in the context menu.