Skip to main content
Kinetic Community

Create an Icon form attribute and apply an icon to a form

This activity will show you how to create Attribute Definitions and Attributes.

This tutorial will teach you how to add an Icon attribute to a Form. More broadly, it will also teach you how to create Attribute Definitions and Attributes.

Kinetic Request CE Bundles are created to use Font Awesome Icons.

 

Screen Shot 2016-05-04 at 2.07.13 PM.png

 

Screen Shot 2016-05-04 at 2.17.56 PM.png

Steps:

  1. Choose an Icon from Font Awesome

  2. Create an Attribute Definition for the icon

  3. Apply an Icon attribute to the form

Choose an icon from Font Awesome

First we will search through the Font Awesome Icon library to select an Icon we would like to use.
  1. Go to the Font Awesome Icon libraryhttp://fortawesome.github.io/Font-Awesome/icons/
  2. Click on an icon to view details.
    FontAwesomeIconLibrary.PNG
  3. On the icon details page, write down or copy the icon name which will be used later.  The name begians with "fa-".
    FontAwesomeIconDetail.PNG

 

Create a new Icon Attribute Definitions

In order to add attributes in CE, you must first define the attributes using Attribute Definitions. 
  1. In the Management Console, select the Setup tab.
  2. Select the Attribute Definitions link.
  3. Select the Form sub-tab.
  4. Click the Add Definition button.
    AttributeDefinitionDetails.PNG
  5. Enter the word “Icon” into the Name field. (Make sure that the first letter is capitalized.)
  6. Leave the Allow multiple attributes checkbox unchecked.
  7. Click the Save Attributes button.
    AttributeDefinitionAdd.PNG
  8. You will be redirected to the previous page and will now see the Icon attribute definition in the table.
    AttributeDefinitionTable.PNG
     

Apply Icon Attribute to a Form

Once an Attribute Definition has been created, it can now be used to add an Attribute to a Form (or Kapp, Space, Category, etc.)
  1. In the Management Console, select the Author tab.
  2. Click Forms link.
  3. Click on the Name link of a Form.
    Forms___Author___ce_training___Kinetic_Core.png
  4. Select the Attrbiutes sub-tab
  5. Select the "Icon" from Name.
  6. Enter Font Awesome Icon name into the Value field.
  7. Click the Add Attribute button.
  8. Click the Save Attributes button.
    Screen_Shot_2016-05-04_at_2_51_56_PM.png
  9. Refresh the catalog page to view the results.