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 <[email protected]>
opensrp · Mar 6, 2024 · b8fb8d2 · b8fb8d2
1 parent ecfc677
commit b8fb8d2
Showing 1 changed file with 114 additions and 6 deletions.
diff --git 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,15 +377,17 @@ 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 |
 spacedBy | An integer value that represents the spacing between the children views of the column | | 8|
 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 |
+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 |