Skip to main content

Target type Any

The custom widget can be rendered in any layout configuration. The custom widget with target type 'Any' is visible for Create/Edit/View layouts in mobile app.

Coding guidelines​

  • pageContext The page context provided has following content
  • pageContext for Any type custom widget: common pageContext

Typical use cases​

It typically is useful for widgets that do not require much context from the application and need to be displayed across different types of layout configurations to reuse the custom code. For example, widgets having static content or some server interaction that does not require any page context.

Sample Code​

function AnyWidgetExample(pageContext) {
    const baseURL = window.location.origin;
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { Box, Text, H3, H4 } = protrakComponents;
    const userName = pageContext && pageContext.userData && pageContext.userData.name;
  
    return (
      <Box direction="column">
        <H4 style={{ paddingLeft: "7px" }}>Hi {userName},</H4>
        <H3 style={{ paddingLeft: "7px" }}>
          {" "}
          Follow the steps below to upload Scanned Agreement:{" "}
        </H3>
  
        <ul>
          <li>
            <H4>
              To Go to Agreement page,
              <a href={`${baseURL}/Agreement/dashboard`} target="_blank">
                click here
              </a>
              OR Open Agreement from section "Agreements Waiting for Secretary
              Response".{" "}
            </H4>
          </li>
          <li>
            <H4> Click on "Edit" icon to upload "Final Agreement". </H4>
          </li>
        </ul>
      </Box>
    );
  }

Here's a preview of how this custom widget looks like.​

target_type_any.png