From b8fb8d2cf5a2e5a3420b722a59d232721f7fc1ae Mon Sep 17 00:00:00 2001 From: Brandy Date: Wed, 6 Mar 2024 16:49:42 +0300 Subject: [PATCH] Update widget doc with missing widget and fields (#3121) * add personal data docs * add card widget docs * update column widget * update list widget * update compound text widget * update image widget --------- Co-authored-by: Martin Ndegwa --- .../configuring/config-types/widget.mdx | 120 +++++++++++++++++- 1 file changed, 114 insertions(+), 6 deletions(-) diff --git a/docs/engineering/android-app/configuring/config-types/widget.mdx b/docs/engineering/android-app/configuring/config-types/widget.mdx index 202b36c42d..39177f7535 100644 --- a/docs/engineering/android-app/configuring/config-types/widget.mdx +++ b/docs/engineering/android-app/configuring/config-types/widget.mdx @@ -102,6 +102,15 @@ emptyList | empty list json with a message to show in case the resource data to registerCard | card to display widgets at | Yes | | views | the desired widgets and their properties to be displayed | | | resources | the list resources to execute rules for | No but should be included if you want to display data as described in the sub-title|emptyList() | +weight | A 'Float' value that represents the type of view. The weight is used to determine how much space the view should occupy in its parent container. | | The default is 0 | +backgroundColor | The background color of the view, specified as a string in the format "#RRGGBB" or "#AARRGGBB". If this property is null, the view will use its parent's background color. | No | Null | +padding | Offsets the content of the view by a specific number of pixels. This should be a number | No | 0 | +borderRadius | Rounds the corners of the view's outer edge | | 0 | +alignment | The alignment of the view within its parent layout. This value is used to distribute the available space among multiple views | | [ViewAlignment.None]| +fillMaxWidth | Determines whether the view should fill its parent's width | | false | +fillMaxHeight | Determines whether the view should fill its parent's height | | false | +clickable | Determines whether the view is clickable | | false | +visible | A String value that determines whether the view should be visible | Yes| true | ### Config properties of nested LIST |Property | Description | Required | Default | @@ -111,6 +120,8 @@ relatedResourceId | Unique identifier for the relatedResources | no but highly r resourceType | The resource to to get/fetch data from e.g Task or Careplan | yes | | conditionalFhirPathExpression | FhirPathExpression to get to use when filtering the resource defined in resourceType section | no | app defaults to using relatedResources types and fhirPathexpression| sortConfig | Configuration used for sorting LIST widget resource | no | | +fhirPathExpression | This is the fhir path expression of a given resource | no | | +relatedResources | resource that is part of the base resource | no | | ## How to use COMPOUND_TEXT Defines the configuration properties for a Compound Text view, which is a view that displays two text strings with an optional separator between them. This view can also have actions associated with each text string. @@ -159,8 +170,12 @@ secondaryTextFontWeight | The font weight of the secondary text | | [TextFontWei primaryTextActions | The list of actions associated with the primary text. If the list is empty, no actions will be displayed | | | secondaryTextActions | The list of actions associated with the secondary text. If the list is empty, no actions will be displayed | | | overflow | Determines how the text should be truncated if it is too long to fit | | [TextOverflow.ELLIPSIS] | +colorOpacity | Determines how the text color should be in terms of color opacity | | Float | +textCase | Determines how the text style should be. The text cases are `UPPER_CASE`, `LOWER_CASE`, `CAMEL_CASE`, `TITLE_CASE` | | TextCase | +fontSize | Determines how the text size in float.| | Float | +maxLine | It defines the maximum number of lines you would like the text to be displayed.| | Int | -##How to use BUTTON +## How to use BUTTON Defines the configuration properties of a Button view, which is a view that can do some actions when clicked. Additionally, the button can be styled using available properties such as `status`, `contentColor`, and `buttonType` ``` json [ @@ -200,7 +215,7 @@ buttonType | Specify the button size | | ButtonType.MEDIUM | `TINY`, `MEDIUM`, contentColor | The content color of the view, specified as a string in the format "#RRGGBB" or "#AARRGGBB". If this property is null, the view will use its parent's content color. | No | Null | | #### How to use button with icon and copy ability -On top of the above properties, you need to add Image config properties see a `startIcon config`*** IMAGE widget ***. This displays the icon before the button text +On top of the above properties, you need to add Image config properties see a `startIcon config` *** IMAGE widget *** . This displays the icon before the button text ``` json { @@ -290,7 +305,7 @@ clickable | Determines whether the view is clickable | | true | visible | A String value that determines whether the view should be visible | Yes| true | details| A list of CompoundTextProperties that represent the details of the service card| yes | emptyList() | showVerticalDivider | A Boolean value that determines whether a vertical divider should be displayed in the service card view | Yes | false | -servicememberIcons | A String value that represents the icons for the service members associated with the service card | yes | null | +service-memberIcons | A String value that represents the icons for the service members associated with the service card | yes | null | serviceButton | A ButtonProperties object that represents a button displayed in the service card | Yes | null | services | A list of ButtonProperties that represent the services associated with the service card | yes | null | actions | A list of ActionConfig objects that represent the actions that can be performed on the service card | yes | emptyList() | @@ -362,8 +377,8 @@ weight | A 'Float' value that represents the type of view. The weight is used to backgroundColor | The background color of the view, specified as a string in the format "#RRGGBB" or "#AARRGGBB". If this property is null, the view will use its parent's background color. | No | Null | padding | Offsets the content of the view by a specific number of pixels. This should be a number | No | 0 | borderRadius | Rounds the corners of the view's outer edge | | 0 | -alignment | The alignment of the view withins its parent layout. This value is used to distribute the available space among multiple views | | [ViewAlignment.None]| -fillMaxWidth | Dertimines whether the view should fill its parent's width | | false | +alignment | The alignment of the view within its parent layout. This value is used to distribute the available space among multiple views | | [ViewAlignment.None]| +fillMaxWidth | Determines whether the view should fill its parent's width | | false | fillMaxHeight | Determines whether the view should fill its parent's height | | false | clickable | Determines whether the view is clickable | | false | visible | A String value that determines whether the view should be visible | Yes| true | @@ -371,6 +386,8 @@ spacedBy | An integer value that represents the spacing between the children vie wrapContent| A boolean value that represents whether the column should wrap its content or not | | false | arrangement | An enum value that represents the vertical arrangement of the child views of the column | | Null| children | A list of ViewProperties objects that represents the child views of the column | | emptyList()| +showDivider | show divider is a boolean variable the gives the capability to show divider within the column if its needed | | String | +action | A list of ActionConfig that represents the child actions that can be performed within the column | | emptyList() | ## IMAGE widget Displays icons or images. @@ -400,6 +417,14 @@ size | Size of the image in pixels | | 24 | imageConfig | The property that points to the actual image. It can either point to a local drawable or a server side Binary file| | [ViewAlignment.None]| padding | Determines whether the view should fill its parent's width | | false | shape | Used to clip the image into a shape e.g into a circle or rectangle | | false | +borderRadius | Rounds the corners of the view's outer edge | | 0 | +alignment | The alignment of the view within its parent layout. This value is used to distribute the available space among multiple views | | [ViewAlignment.None]| +fillMaxWidth | Determines whether the view should fill its parent's width | | false | +fillMaxHeight | Determines whether the view should fill its parent's height | | false | +clickable | Determines whether the view is clickable | | false | +visible | A String value that determines whether the view should be visible | Yes| true | +weight | A 'Float' value that represents the type of view. The weight is used to determine how much space the view should occupy in its parent container. | | The default is 0 | + ## ROW widgets The purpose of the row is to act as a container for organizing and laying out its child views horizontally. @@ -569,4 +594,87 @@ After defining the above JSON example a view will be rendered with the following viewType | The type of widget that will be rendered in this case it is the `SPACER` view. | Yes | [ViewType.SPACER]| height | The height of the Spacer. | Yes | _ | backgroundColor | The background color of the view, specified as a string in the format "#RRGGBB" or "#AARRGGBB". If this property is null, the view will use its parent's background color. | No | #FFFFFF | -padding | Offsets the content of the view by a specific number of pixels. This should be a number | No | 0 | \ No newline at end of file +padding | Offsets the content of the view by a specific number of pixels. This should be a number | No | 0 | + +## Personal Data Widgets +Personal data widget, defines personal data like age to it's corresponding value in a more organised way.It takes a list of mapped items as input.It contains various properties that defines its behavior. + +```json +{ + "viewType":"PERSONAL_DATA", + "weight":1.0, + "personalDataItems":[ + { + "label":{ + "viewType":"COMPOUND_TEXT", + "primaryText":"@{runningBalance}", + "primaryTextColor":"#000000", + "primaryTextFontWeight":"SEMI_BOLD" + }, + "displayValue":{ + "viewType":"COMPOUND_TEXT", + "primaryText":"Available", + "fontSize":14, + "primaryTextColor":"#000000" + } + } + ] +} +``` + +### Config properties of PERSONAL DATA WIDGET +|Property | Description | Required | Default | +|--|--|:--:|:--:| +viewType | Specifies the type of view. It acts as a discriminator to identify the type of view during runtime. | Yes | [PERSONAL_DATA]| +weight | It defines the weight of the view, which is typically used in layout containers with weighted distribution to control the amount of space a view occupies relative to other views.| | Float | +backgroundColor | t represents the background color of the view, specified as a color code in the format "#RRGGBB" or "#AARRGGBB". If null, it indicates a transparent background. | | String? | +padding | It defines the padding around the content of the view, in pixels. | No | Int | +borderRadius | It specifies the radius of the view's corners in pixels. Setting this property creates rounded corners for the view.| | Int | +alignment | Specifies the alignment of the row's content within the row. | | [ViewAlignment]| +fillMaxWidth | It indicates whether the view should attempt to occupy the maximum available width in its parent layout. | | Boolean | +fillMaxHeight | It indicates whether the view should attempt to occupy the maximum available height in its parent layout. | | Boolean | +clickable | Indicates whether the view is clickable. If set to "true", the row can be interacted with and handle click events. | | String | +visible | Specifies the visibility of the view. If set to "true", the row will be visible, otherwise, if set to "false", it will be hidden | | String | +personalDataItems | It indicate the list of two text that is label and its corresponding display value | | List | + +## Card Widget +Card are used to represent single coherent piece of content + +```json +{ + "viewType":"CARD", + "header":{ + "viewType":"COMPOUND_TEXT", + "primaryText":"HOUSEHOLD MEMBERS", + "primaryTextColor":"#6F7274", + "fontSize":18.0, + "padding":16 + }, + "contentPadding":0, + "content":[ + + ] +} +``` + +### Config properties of CARD WIDGET +|Property | Description | Required | Default | +|--|--|:--:|:--:| +viewType | Specifies the type of view. It acts as a discriminator to identify the type of view during runtime. | Yes | [PERSONAL_DATA]| +weight | It defines the weight of the view, which is typically used in layout containers with weighted distribution to control the amount of space a view occupies relative to other views.| | Float | +backgroundColor | t represents the background color of the view, specified as a color code in the format "#RRGGBB" or "#AARRGGBB". If null, it indicates a transparent background. | | String? | +padding | It defines the padding around the content of the view, in pixels. | No | Int | +borderRadius | It specifies the radius of the view's corners in pixels. Setting this property creates rounded corners for the view.| | Int | +alignment | Specifies the alignment of the row's content within the row. | | [ViewAlignment]| +fillMaxWidth | It indicates whether the view should attempt to occupy the maximum available width in its parent layout. | | Boolean | +fillMaxHeight | It indicates whether the view should attempt to occupy the maximum available height in its parent layout. | | Boolean | +clickable | Indicates whether the view is clickable. If set to "true", the row can be interacted with and handle click events. | | String | +visible | Specifies the visibility of the view. If set to "true", the row will be visible, otherwise, if set to "false", it will be hidden | | String | +content | It indicate a section where you can specify the views to be included within the card it takes list of view properties| | emptyList() | +cornerSize | It indicate the size of card corner bend a card should have it is in integer form | | Int | +elevation | It indicate the size of raise a card should have it is in integer form | | Int | +header | It indicate the heading text of the card it can only be used when it is required | | CompoundTextProperties | +headerBackgroundColor | It specifies the header background color of the card it takes the color code as a string | | String | +headerAction | It specifies what the header action what it supposed to perform when it is clicked | | CompoundTextProperties | +emptyContentMessage | It specifies what message should be displayed within the card when it has no content | | String | +contentPadding | It specifies the card content spacing | | Int | \ No newline at end of file