User Interface Components > Work Instructions Example Implementation > Work Definition Media Display Component
Work Definition Media Display Component
Media display UX component for a work definition.
The work definition media display component displays the media associated with a work definition in a series of selectable tabs. When a tab is selected (Image, Video, or CAD), the media of that type associated with the work definition displays. If there is no media of that type associated with the work definition, then a default image displays for that tab. If there are multiple media entities for the selected tab, selectable dots display at the bottom of the pane. Clicking each dot navigates between the multiple media entities.
Media display user interface component, showing selectable dots for navigating through multiple media.
Selecting a part in a diagram on the CAD tab selects the related row in the materials list.
Mashups and Widgets
The primary mashup defining this component is the PTC.SCA.SCO.WorkDefinition.InfoTabContainedMashup mashup. This mashup in turn calls the following mashups for the individual selectable tabs:
PTC.SCA.SCO.WorkDefinition.ImageContainedMashup—Mashup for the Image tab display.
PTC.SCA.SCO.WorkDefinition.VideoContainedMashup—Mashup for the Video tab display.
PTC.SCA.SCO.WorkDefinition.CADContainedMashup—Mashup for the CAD tab display.
Each of these mashups uses a Tabs widget to determine the content displayed. The Tabs widget in the PTC.SCA.SCO.WorkDefinitionInfoTabContainedMashup mashup defines the three tabs available, and calls the appropriate mashup for each tab. Within each of the selectable tabs mashups, the Tabs widget displays either the associated media, or a default image. The selectable tabs mashups also use a Collection widget for navigating between multiple media entities, when applicable.
The PTC.SCA.SCO.WorkDefinition.CADContainedMashup mashup also uses a ThingView widget to display the CAD diagrams. For more information, see ThingView Widget.
Inputs
The input for these mashups is the UID of the work definition associated with the selected work instruction tile in the sequential navigation component mashup (PTC.SCA.SCO.WorkDefinitionHorizontalSequentialNavigation). For more information on work definitions and their related information, see Work Definition Schema.
The input for cross-selection between the CAD diagram and the materials list comes from the SelectedParts property on the materials list component mashup (PTC.SCA.SCO.MaterialsListMashup). When one or more rows in the materials list are selected, that selection sets the value for the SelectedParts property on the materials list mashup. This value is passed to the SelectedParts property on the CAD tab mashup (PTC.SCA.SCO.WorkDefinition.CADContainedMashup), and the appropriate parts in the CAD diagram are highlighted.
Outputs
When a part in the CAD diagram on the CAD tab is selected, the ConvertSelectedPartsToSelectedRows service sets the value for the SelectedRows property on the PTC.SCA.SCO.WorkDefinition.CADContainedMashup mashup. This value is passed to the SelectedRows property on the materials list component mashup (PTC.SCA.SCO.MaterialsListMashup).
Services
The following services from the PTC.SCA.SCO.ProductionOrderUtils thing are used by the mashups in this component:
PTC.SCA.SCO.WorkDefinition.ImageContainedMashup:
GetImageList—Retrieves the image media entities associated with the work instruction.
IsMultipleMedia—Determines if there are multiple image media entities for the work instruction.
PTC.SCA.SCO.WorkDefinition.VideoContainedMashup
GetVideoList—Retrieves the video media entities associated with the work instruction.
IsMultipleMedia—Determines if there are multiple video media entities for the work instruction.
PTC.SCA.SCO.WorkDefinition.CADContainedMashup
GetCADList—Retrieves the CAD media entities associated with the work instruction step.
IsMultipleMedia—Determines if there are multiple CAD type media entities for the work instruction step.
The following services from the PTC.SCA.SCO.ThingViewUtils thing are used by the PTC.SCA.SCO.WorkDefinition.CADContainedMashup mashup in this component:
ConvertSelectedPartsToSelectedRows—Converts the selected parts in the CAD diagram to selected rows in the materials list.
GetOccurrencePathsList—Returns a mapping of materials to their corresponding occurrence paths for the given work definition UID.
Was this helpful?