With the Inline Details View you can display related details (e.g. attributes, charts, pictures or even calculations) for a specific object if you hover the mouse cursor over a line item.

You can toggle the Inline Details View in a given table by using the Enable/Disable Inline Detail View  icon.

To define a new Inline Details View:

1. Go to Configuration > Price Setting > Inline Details Configuration.
   
2. Click the Add  icon. A new window opens.
   
   1. Enter a Name; optionally a Label too. 
   2. In the Target Object Type drop-down, select for which object the Inline Details View should be used. The options are:
      • Product
      • Product Extensions
      • Customer
      • Customer Extensions
      • Pricelist
      • Price Grid
      • Manual Pricelist
        
   3. Select a calculation logic prepared to show the required details. See an example below.
      
   4. Click the Save button.
3. Optionally, assign view permissions to a user group.
   

CFS Logic Example

As an example, we will show how to create a calculation logic that displays product inline details from the screenshot above.

1. Go to Administration > Calculation Logic and create a new generic logic.
2. In the Nature column, select Inline Details View. This setting makes this logic selectable in the inline details view configuration.
3. Click the Edit Details  icon and add elements to the logic. To recreate the above inline details view, we will need the following elements:
   
   

   1. Date – This element returns the current year. This value will later be used in the chart configuration. As it is only an auxiliary element, we do not want it to be displayed in the details view box and so we set 'Display Mode' to 'Never'.

      Year(AddYears(GetDate("now"), -1))

   2. FirstEntry – Retrieves and displays the product ID.

      def sku = api.currentItem("sku")
      return sku

   3. SecondEntry – Retrieves the value of the Cost field for the current product.

      def cost = api.currentItem("Costs")
      return cost

   4. Chart – Defines a chart that can be opened from the details view box. You can define a chart directly in Data Analyzer and use the 'Chart Builder API Hint' feature to get the chart code.

      def sku = api.getElement("FirstEntry") instanceof String ? api.getElement("FirstEntry") : null
      api.newChartBuilder()
      	.newWaterfall()
      		.getOptions()
      			.setTitle("Waterfall")
      			.setSubtitle("")
      			.setHideLegend(false)
      			.back()
      		.getSeries()
      			.setHideDataLabels(true)
      			.setDatamart("S000188.datamart_transaction")
      			.setCurrency("EUR")
      			.getFilters()
      				.addFilter("InvoiceDateYear", FilterOperator.GREATER_THAN_OR_EQUAL_TO, api.getElement("Date"))
      				.back()
      			.addDimFilter("ProductID", sku)
      			.getAggregation()
      				.withTotal()
      				.back()
      			.addWaterfallColumn(WaterfallColumnType.RESULT, "Base", "Base")
      			.addWaterfallColumn(WaterfallColumnType.ADD, "ProductClassAdjustment", "Prod Class Adjustment")
      			.addWaterfallColumn(WaterfallColumnType.ADD, "PLCAdjustment", "PLC Adjustment")
      			.addWaterfallColumn(WaterfallColumnType.RESULT, "ListPrice", "List Price")
      			.addWaterfallColumn(WaterfallColumnType.SUBTRACT, "StdDiscount", "Standard Discount")
      			.addWaterfallColumn(WaterfallColumnType.SUBTRACT, "Promotion", "Promotion Discount")
      			.addWaterfallColumn(WaterfallColumnType.SUBTRACT, "VolumeDiscount", "Volume Discount")
      			.addWaterfallColumn(WaterfallColumnType.ADD, "ServiceAdjustment", "Service Adjustment")
      			.addWaterfallColumn(WaterfallColumnType.SUBTRACT, "SalesDiscount", "Sales Discount")
      			.addWaterfallColumn(WaterfallColumnType.RESULT, "InvoicePrice", "Invoice Price")
      			.addWaterfallColumn(WaterfallColumnType.SUBTRACT, "PaymentTermsDiscount", "Cash Discount")
      			.addWaterfallColumn(WaterfallColumnType.SUBTRACT, "Bonus", "Boni")
      			.addWaterfallColumn(WaterfallColumnType.RESULT, "PocketPrice", "Pocket Price")
      			.addWaterfallColumn(WaterfallColumnType.SUBTRACT, "ProductCost", "Production Costs")
      			.addWaterfallColumn(WaterfallColumnType.RESULT, "NetMargin", "Net Margin")
      			.back()
      		.build()

   5. Image – Defines an image of the product that can be opened from the details view box. We will use a matrix that will contain the image.

      def matrix = api.newMatrix();
      def imageCell = matrix.imageCell("http://yourwebsite.com/wp-content/uploads/2016/MB-0001.png")
      matrix.addColumn("images")
      matrix.addRow(["images": imageCell])
      return matrix

4. Save the logic.
   Now the CFS logic will be available for selection in the inline details view setup.