You are here

Display Tool

Part of the display tool is shown below:-

  • Field name - This is the name of the field that contains the data to be displayed
  • Name - This is the common name for the field. In the display panels shown below this name is used for the column titles
  • Header title - For the display panels shown below, this title is used for the header names and provides additional information about the information shown
  • Display - This allows you to change how the information is displayed. Below are all the display options currently available.
  • Css class - Governs the css class associated with data
  • Icon - This governs the graphics that you want to display, to seperate each statement use :
    • Yes - Shows the default image icon/s. These images can be set up for your paticular project, but they can also be overwritten if required using the following notation

      icon="Link to image", for some display options there are more than one image like arrows and the notation for these options are shown in the notes below
       
    • Google - Shows the default goolgle icons. If you want to use different icons, use google:icon="the name of the google icon required."
    • Class -  if you use class=className:, then in Google the default of "material_icons" will be replaced by the class specified, while in the image options, the class will be added. Please be aware that the class, will affect all options
    • Style - If you use style="Style required", then the style will be added. Please be aware that the style, will affect all options within that item to display
    • Other - If you want to affect just one of the icons to be displayed use css and the class associated with that icon, see notes below. An example of this is shown with stars
       
  • Parameter - Only used with key and adds an extra parameter to the url supplied.
Some display options are more complex like pound_sum and these options are explained in the notes at the bottom of the page. Every icon comes with its own class or classes, depending on the display option and the appropriate class/classes are detailed along with the notes

Managing Category Detail


Group - Icon

Up/Down - arrows

Class names:- upIcon, downIcon, spaceIcon
Icon names :- up, down, space.

So if you wish to other icons then use up="Path to icon" etc. for image icons or google:up=upIcon:down=downIcon for Google icons. Space is ignored for google but used for images

    • Edit
    • Code
    • Name
    • Desc.
    • Up
    • Down
    • Up
    • Down

Colour/Color - colour

Initial data:- #79b5d1

    • Edit
    • Code
    • Name
    • Desc.
    • Icon
    • Span
    • Edit - 884
    • colour
    • Colour/Color
    • Displays the item as a colour/color. Only works for colours in the format of #xxxxxx; where xxxxxx in the hexidecimal representation of the colour
    • #79b5d1
    •     

Email - email

Initial data:- support@web-d-zine.co.uk

Information - info

Initial data:- Lorem ipsum - See note 1

    • Edit
    • Code
    • Name
    • Desc.
    • Icon
    • Info
    • Edit - 738
    • info
    • Information
    • Information is used to display the information icon with the content of the field used as the title
    • Lorem ipsum dolor 'sit' amet. Et dolorem animi et laboriosam necessitatibus eum temporibus quis hic mollitia ipsa? Vel magni ipsam eum temporibus quis sit tenetur laborum. Est earum galisum et enim fuga qui natus tenetur qui doloribus officia et deserunt labore eum Quis doloribus. Ut voluptates totam id atque nostrum qui illum repellat id architecto minus eos voluptatibus facilis. Aut galisum quaerat rem consequatur rerum ea quibusdam ipsum hic voluptas facilis et inventore similique quo consequatur velit sed quia autem. Ut ullam consequatur et quia deleniti aut facere culpa sed enim eveniet eos minus velit! Aut enim optio ex sint dolores est asperiores velit. Qui sapiente quod qui ratione quibusdam non nobis tempore non beatae deleniti aut quis ipsum sed quam voluptas.
    • info

Key - key

The following are just some of the options available. Up, down and toggle are coded for you, but you can add more if required. If you choose to use google icons then you really need to choose the icon which is why the default is a ?. Use google:icon=icon required: to get the icon you want.

Link - link

Initial data:- http://www.saltylass.co.uk/

Post code - postcode

Initial data:- SW1A 1AA

Telephone - telephone

Initial data:- +447436112854

Stars(5) - stars_5

Initial data:- 5
Class names:- starIcon, starOutlineIcon
Icon names :- star, outline.

If you wish to use google icons and you do not like the default icons, then use the following code in icon:- google:star=starIcon:outline=outlineIcon

    • Edit
    • Code
    • Name
    • Desc.
    • Icons
    • Google
    • Edit - 1007
    • stars_5
    • Stars(5)
    • Displays a number of stars
    • *****
    • starstarstarstarstar

Group - Limits

Limit 30 - limit_30

Initial data:- Lorem ipsum - See note 1

A count has also been added to this type so you can see the effect of limit_30_count - See note 2 and 3

    • Edit
    • Code
    • Name
    • Desc.
    • Text
    • Count
    • Blank
    • Edit - 740
    • limit_30
    • Limit 30
    • Limits the information to 30 characters
    • Lorem ipsum dolor 'sit' amet. Et
    • Lorem ipsum dolor 'sit' amet. Et
    • 1
    • 0

Limit text then add a more link - limit_40_more

Initial data:- Lorem ipsum - See note 1

A count has also been added to this type so you can see the effect of limit_40_more_count - See note 2 and 3

More links only work with limit, as there can be more text with these options. The default effect is shown here but more complex effects can be created with the code supplied

    • Edit
    • Code
    • Name
    • Desc.
    • Text
    • Count
    • Blank
    • Edit - 893
    • limit_40_more
    • Limit text then add a more link
    • Limits the text to 40 characters then adds a more link
    • Lorem ipsum dolor 'sit' amet. Et dolorem Read more
    • Lorem ipsum dolor 'sit' amet. Et dolorem Read more
    • 1
    • 0

Group - Logic

Boolean - boolean

    • Edit
    • Code
    • Name
    • Desc.
    • No
    • Yes
    • No
    • Yes
    • Edit - 737
    • boolean
    • Boolean
    • Shows the information as a boolean representation
    • false
    • true
    • highlight_off
    • check_circle_outline

Toggle - toggle

Protected - protected

    • Edit
    • Code
    • Name
    • Desc.
    • No
    • Yes
    • No
    • Yes
    • Edit - 765
    • protected
    • Protected
    • Toggles for negative answers, but is protected for positive answers
    • false
    • true
    • cancel
    • check_circle_outline

Group - Money

Pound - pound

Initial data:- 643.79

    • Edit
    • Code
    • Name
    • Desc.
    • Pound
    • Edit - 880
    • pound
    • Pound
    • Displays the information as money, in this case the British pound
    • £643.79

Pound plus sum - pound_sum

Initial data:- 6083.92

    • Edit
    • Code
    • Name
    • Desc.
    • Pound_sum
    • Edit - 889
    • pound_sum
    • Pound plus sum
    • Shows curreny in pounds plus adds a sum row at the end of the list
    • £6,083.92
    • £6,083.92

Dollar - dollar

Initial data:- 226.87

    • Edit
    • Code
    • Name
    • Desc.
    • Dollar
    • Edit - 881
    • dollar
    • Dollar
    • Displays the information as money, in this case dollars
    • $226.87

Dollar plus sum - dollar_sum

Initial data:- 8742.48

    • Edit
    • Code
    • Name
    • Desc.
    • Dollar_sum
    • Edit - 890
    • dollar_sum
    • Dollar plus sum
    • Shows the currency in dollars plus add a sum at the end of the list
    • $8,742.48
    • $8,742.48

Euro - euro

Initial data:- 1019.46

    • Edit
    • Code
    • Name
    • Desc.
    • Euro
    • Edit - 882
    • euro
    • Euro
    • Displays the information as money, in this case Euros
    • €1,019.46

Euro plus sum - euro_sum

Initial data:- 202.02

    • Edit
    • Code
    • Name
    • Desc.
    • Euro_sum
    • Edit - 891
    • euro_sum
    • Euro plus sum
    • Displays the coloumn in Euros plus adds a sum at the end
    • €202.02
    • €202.02

Group - Special

Title - title

Initial data:- Lorem ipsum - See note 1

    • Edit
    • Code
    • Name
    • Desc.
    • Edit - 311
    • title
    • Title
    • You can add a title to the list. The information contained in this field will be used to provide that title

Password - password

Initial data:- Password

    • Edit
    • Code
    • Name
    • Desc.
    • Password
    • Edit - 1000
    • password
    • Password
    • Shows data as * reguardless of the text
    • ********

Notes

  1. Lorem ipsum refers to the following text:-
    Lorem ipsum dolor sit amet.
    • Et dolorem animi et laboriosam necessitatibus eum temporibus
    • quis hic mollitia ipsa? Vel magni ipsam eum temporibus quis sit tenetur laborum.
    Est earum galisum et enim fuga qui natus tenetur qui doloribus officia et deserunt labore eum Quis doloribus. Ut voluptates totam id atque nostrum qui illum repellat id architecto minus eos voluptatibus facilis. Aut galisum quaerat rem consequatur rerum ea quibusdam ipsum hic voluptas facilis et inventore similique quo consequatur velit sed quia autem. Ut ullam consequatur et quia deleniti aut facere culpa sed enim eveniet eos minus velit!
    Aut enim optio ex sint dolores est asperiores velit. Qui sapiente quod qui ratione quibusdam non nobis tempore non beatae deleniti aut quis ipsum sed quam voluptas.
  2. The display code is split on the "_", so that limit_30 reads as limit the text to the first space found after 30 characters, while limit_50 would limit the text to the first space after 50 characters.
  3. The following additional codes have already been programmed up
    • Count - Adds a count to the data displayed, adding a count has been shown along with the limit text. Blank entries in the data are not counted
    • Sum - Adds a sum to the data, only works with numerical data
    • More - Only works with limit and adds a more link