Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The control is FAB specific to allow drag and drop of excel files and set the data to a table control

Properties of Excel Drop

  1. Id - unique identifier of the control
  2. Title - Text displayed in the control before an excel file has been dropped. The default text is "Drop a spreadsheet file here".
  3. From Sheet - this is the Excel Worksheet name where the control will look for the data.
    1. Take note that the Excel Worksheet should have the first row as a heading/column names and these should exactly correspond to the Bound Field names of the
    Table  Cells
    1. Table cells.
    2. If you need to import data from more than one sheet from the Excel Worksheet file, list the sheets you would like to use and separate them with a semicolon.
      Image Added
  4. To Table Bound Field - The Table Control Bound Field where the data will be assigned.
    1. If you are importing data from multiple sheets (see above), each sheet should be bound to the bound field of a table. List the table fields separated by a semicolon.
       Image Added Image Added Image Added

      Sheet1 → header
      Sheet2 → items
  5. OnDrop - optional Javascript Function that will be called during on the event of dropping an Excel File into the controlThe way the OnDrop is designed(currently), is that it over-rides the standard method allowing (an expert) to parse and set the data.  This would require one to do all the data conversion to load the data into the front-end.
    1. Function format: theFunctionName(oContents)
    2. oContents will contain an array with the sheets from the Excel spreadsheet file (oContents.Sheet1, oContents.Sheet2, etc)
  6. Width - set the width of the control (e.g 50px)
  7. Height - set the height of the control (e.g 100px).
  8. Visible - set a boolean value or a variable with type boolean from the Model to control the visibility property
  9. AfterDrop - optional Javascript Function that will be called after the event of dropping an Excel File into the control. This can be used to validate the data after its entered via excel.
    1. Function format: theFunctionName(oContents)
    2. oContents will contain an array with the sheets from the Excel spreadsheet file (oContents.Sheet1, oContents.Sheet2, etc)


Step-by-step guide

How to add a HTMLan Excel File Drop:

  1. Right-click on a Page, Form Element or from any elements under Add Layout and select Add Excel Drop
    Image Modified
  2. An Excel Drop control has been added
  3. Maintain the Properties of the Excel Drop according to your requirements.

Filter by label (Content by label)
showLabelsfalse
max5
spacescom.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@223dfe
showSpacefalse
sorttitle
typepage
cqllabel in ("add-ui-elements","vertical-layout-implementation") and type = "page" and space = "IFAB"
labelskb-how-to-article

...